Quiz Project W.I.P. Feedback

So, I’m making this. It’s still very early in the progress department.

I’m currently trying to test functionality with the quiz itself.

2 things I’m looking for right now:

  1. how the basis of the quiz functionality runs, and
  2. how everything looks design-wise, if there’s anything I need to change to help improve the look of the website layout.

(…I have no idea what I’m doing. XD)

Actually, 1 more thing.

What can i do to improve the organization of the repository?

This is my first time actually importing a multi-page website to Github.

The other ones are single-page ones.

Actually, you know what, there’s one more thing I want to ask about: the code.

3 main things: how the code is organized, which ones seems redundant (the CSS in particular), and what can I do to make the code more efficient.

UPDATE: I made another repository importing all the files from VSC using Git. I updated the link.

Here’s the original repository I shared before, now under a new name.

I would suggest deploying this somewhere like GitHub pages. You will get more responses that way. :+1:

As of now, people will need to clone the repo and run it locally. Which I don’t think a lot will want to do. For feedback, people usually like to click on a link to a deployed app and then create feedback from there. and then if they want to look at certain aspects of code, they can :+1:

Hope that helps

1 Like

I see.

Like this? Quiz Project

I just followed the instructions on Github pages.

1 Like

I think you are off to a good start :+1:

When I click on one of the quiz links up top, I see the quiz name followed by two buttons.

I tried clicking on the history button but it didn’t appear to do anything. But also, I wasn’t sure what that was supposed to be. So maybe consider just having one button for start or begin.

Once I started the quiz, I did notice an issue with the answer selection. For example, I am doing the algebra quiz, and say if I selected the second option for question 1, then the next question would also have the second option already selected.

Looking at your code, it looks like the value for the name attribute is being used for all sets of questions. Right now it is name="choice". But each question should have a different name. In your `quiz.js` file , I would add the logic for giving each question a unique name value.

Design has never been my strong suit but my general impression is that there is a lot of whitespace. Whenever, I have to come up with designs, I always study existing sites to see what patterns they are using. So you can try that route :+1:

You could consider grouping some of these files. For example, you have _flex.scss and _space.scss files. In the root directory, you can create a scss folder and follow the suggested guidelines here in the sass docs

It talks about a 7-1 pattern. I don’t know if you need all of that for this project. but it is helpful to learn and maybe implement some of it. :+1:

As for your json files, you could consider putting those inside of a data directory.

As for your quiz-start file, I would consider renaming that to something like quiz-init. That way it is more reflective of what is happening since that logic is for initializing a quiz. you could also consider moving that logic to the quiz.js itself.

Also, that quiz-start logic is starting to get repetitive. Right now you are attaching a click event to each link. Instead, you can have an array of links and quizTypes and then use a forEach to loop through each of the links add attach an event listener.

Hope that helps

1 Like