Chinese Quiz Website

There were some bugs/silly mistakes I caught, such as sourcing an image incorrectly (bar.png instead of Bar.png). As for the bar graph, I realized that it only showed a portion of the bar, even if I got all questions in that section correct. I realized that I sorted questions like so: if ((question_number+1) < 6) { Unit = 0 } . The issue is that each unit/grade has 6 questions, but since I said <6, for example, it only considered questions 1-5. I just increased n of < n by one, but it took me a bit to fix my little idiot mistake. But hey, that’s what coding’s for, right? (Here’s the fixed code!)

Finished bar graph and visuals of the website (and fixed mistakes in Chinese grammar)! I know that quizzes aren’t very enjoyable, so I tried my best to make as low-stress and fun as possible. I added more of the tiny little tiger avatar, animating a thinking animation and a celebration animation (hopefully that makes quiz-takers feel better :D). I also wanted to clearly show which units/grade levels the learner excelled at/needed to improve upon, alongside the scoring system and the list of questions wrong. This was conveyed through a bar graph, which was made up of rectangles that adjusted their length based on the number of questions right in that section. Overall, coding a website for the first time was really fun, and I enjoyed learning HTML, JS, and CSS!

Gave my text a background with box shadows to make it pop more, and finally input all the questions that will be tested (most were questions from various PDFs across the web, levels K-5). There are now 36 questions total! In the code, I also assigned a unit (/grade level) to each question so that I could see which units the user was the best at, or could improve upon. I hope to use a bar graph to convey this data later! (I also noticed a mistake in the Chinese, so going to fix that, too)

I added a scoring system that added points for every question correct and listed which questions the user answered wrong. This will let me know which questions/topics the user is struggling on! Also added more pizazz with the CSS by changing the cursor (look at the little guy! :D), styling the buttons, and placing a little waving tiger at the beginning (animating that was such a pain, haha). I struggled with the check boxes though; I didn’t know how to record which answer was checked, and uncheck the other boxes when the user checked one. Reading through forums helped me realize that radio buttons were far superior in this situation, and I hope to customize those as well!

Learned some CSS and added basic features, such as background color and font. Took me a bit to figure out how to set a font for Chinese, but realized I could import it from Google fonts! They made it convenient by providing the necessary CSS and HTML code. Now it looks a little less generic, haha.

Created the framework of how the website works through html and javascript. Has a welcome page, assigned answer choices for each question, and a next button. Will need to work on adding a limit to the next button (further than the assigned amount of questions in the array and the results are undefined), score tracker, and of course, CSS ;).