https://1clide1.github.io/Brandon-s-Quiz-Show-/

Hello Welcome to the quiz project I made! here we will discuss why I made this project, what steps I took to make it, what I learned and lastly links to the main resources I used to create this project!

I mainly made this quiz so I can actually learn javascript for myself. At the time I had a very basic idea of how js worked however I still didn't understand a lot of it and a project like this forced me to actually use the knowledge I already had and made me find out what I needed to know to actually complete what I set out to do.I used refrences but I also had a main vision as well which was to create all of the quiz in a single page and the refrences helped me get there. I didn't actually want to follow exactly what these refrences did because I felt like I wouldn't have learned anything and all the issues I would've had would actually never happen.-

What I did to make this a reality was that I created an html page and started to add what I wanted. I already knew I wanted to have a dark mode so I focused my attention on that first. I created the landing page that I would add upon that in the future but for now I had a html page that showed the intro, a play and highscore button, and a css page that brought this page to life. I then made a js file to make all of the quiz logic (and logic for everything else). I made sure to link all of them in the header and making sure to defer the js link that way the js downloads first but doesn't actually load until everything else is loaded first. that way I don't have any issues if someone opens the link and then has to wait because the quiz isn't actually working just yet. To simplify what I mainly did from here was add upon what I had that way I could take the quiz by pressing play, actually do the quiz while it feeds me the questions one by one automatically, all while on the page it's keeping track of the time and score after the time runs out it shows what score you had and asks you to write down your intials and save your score. That will in turn bring you back to the main page where if you wanted to you could view the highscores. if you did click that you could see the scores you have saved and if you wanted to take the quiz again I made sure they knew they could just refresh the their page and then it will bring you back to square 1 (which is the intro). All this works in one page because essentially what the js is doing is hiding and showing certain elements (that i assigned in css) depending on what happens and what you click. That and js is also making the quiz work in the first place :p. Another key not on how the js works is that I used the html buttons and interface (p tags, list tags, etc) as a placeholder and made sure to remove those and replace it with functioning js versions. It's basically the same button but now they work how I intended them to.

Just wanted to highlight known issues that I have and didn't really have time to fix the main one is that the way I wrote the score I accidentally made it fixed in one certain location that I cannot move with css. I'm pretty sure I probably mis-wrote something in js to make it act like this in the first place but as for now it doesn't respond to css so I just ended up deleting the css until I can figure out what is going on. Another issue is that I only focused my efforts in optimizing this to for mobile so it might not display properly on laptops or mid-sized screens although I am not entirely sure because I didn't properly find out. Also I only added about 5 questions because I wasn't really focused on the questions exactly but more can I make this quiz actually work as I want it to.

I learned a bunch of of js tricks and fundementals doing this project most noteably how create a single page that could soley handle a complex task like giving a quiz to you, that you can use the $ in vinalla js to assign elements, => can create a function In an existing function like addeventlistener etc and how you could use arrays to show up in various ways like help make a quiz with answers that let you know whether what you clicked was right or wrong and show arrays in something like a highscore leaderboard. I learned a little bit of JSON and more learned how local storage works and how you can actually not only clear local storage in js but through chrome as well. More importanlty for myself I learned how to use resources for myself to tackle a simple idea in nature but actually make it a reality in the complex world of js and that if you are persistent you can eventually create something that you are proud of finising. Even though I have some issues now I still feel like I finised what I set out to do which was mainly to create a website where you can take a quiz that everything was housed all in one page that way you didn't need to go through any extra pages.

https://www.youtube.com/watch?v=AHh57PrdQsA&list=PL7Tva4HgS0nEaBuCAjEJHoTV_LJJhZ3KO&index=16 https://www.youtube.com/watch?v=f4fB9Xg2JEY&list=PL7Tva4HgS0nEaBuCAjEJHoTV_LJJhZ3KO&index=4 https://www.youtube.com/watch?v=riDzcEQbX6k&list=PL7Tva4HgS0nEaBuCAjEJHoTV_LJJhZ3KO&index=3

Huge shoutout for these youtube creators for actually making these guides because it mainly took out most of sludge to get an idea of how I wanted this to work (since I really only had an idea to layout the very basic start) but more importantly for these people for exposing me to techniquies and teahcing me basic fundemetal js stuff that I have never seen before