How to Make a Quiz App using HTML CSS Javascript - Vanilla Javascript Project for Beginners Tutorial
HTML-код
- Опубликовано: 27 июн 2020
- Learn how to make a quiz app using HTML, CSS, and Javascript Tutorial. We will only use vanilla Javascript to create this project and it is for complete beginners.
If you want to follow me along my coding journey, be sure to subscribe :)
/ @briandesign
Check out my playlist to see my HTML, CSS, & Javascript Tutorials
• How to Make a Website ...
How to create a Navbar with HTML and CSS
• How to Make a Responsi...
Udacity Front end Developer Nanodegree
• Udacity Front End Web ...
I just started this tutorial! You are such an awesome tutor! Very clear, and informative on why you do the steps and perfect pace. Thank you so much for this tutorial!
Great video. Many thanks for your clear explanations of the javascript code
For any mobile users who are coding this change the min-height of the .choice-container to 1rem It worked for me
Thanks so much. Had to complete this project for school and you helped me all the way through
Thank you so much Brian. This is very helpful!
Great tutorial! Learned some new things along the way such as the tag shortcuts! Thank you!
A great introduction to javascrpit helped me understand the concept so much better.
Amazing video tutorial. Thank you, Brian!
Thank you so much for this tutorial it was very helpful please make more of these videos ; )
Thank you so much for this tutorial. I needed this for my upcoming project and applying javascript was hurting my head
Great tutorial on how to make a trivia quiz. I will use it for my own trivia.
Thanks a lot Brian. Really helpful :)
Great Tutorial!! I learned a lot!!
Hey, thank you so much for helping me, but can you change the question into audio rather than text? I have trouble adding the function to play audio into the javascript, can someone help?
What extension do you use to see wrappers or start-end elements in different colors?
Thank you youtube for showing me this channel... this is amazing.
This was gr8 👏 but I wanted you to add a result button at the end to show the result.
Hi Brian, can you send a link with the codes to download because it tells me that max_questions is not defined
Thank you for this tutorial big man, javascript is pretty hard to learn but you explain it very well
Yea it is . I am learning it too
ratio lil jit
Thank You soooooooooooo much ........... this was really cool and helpful ... !!!
But it not working at the same any hidden skill then kindly share
How can I change the div into a p tag the way he's doing? My visual studio isn't doing it automatically. Thanks.
Amazing Amazing sir you are super duper awesome
thank you so much.
Does the scoreboard gets saved in a database or something ??? or its just a local storage
Thanks for the tutorial
Do you have sheet and then make timer multiple choice with them instead of type problem and choices in the code.
liked and subscribed, i am doing some project and i need something quick and you good
hey, I need help with storing user choice in the quiz to google sheet or some place. How do I get this done?
Hey is there a way I can see your github code or something ?
hey i need help with 46:24 when he incrementScore.i get a syntax error
hello im making micro project on this topic sir so how link each pages means are u r ready on clickg next page how to do that plz help me out
hi guy, very helpful video, thanks for sharing
Great! Keep it up, How do I save the highscore to firebase and if user return and play again and also fill the form with the same username firebase will updated/increase his score and update his level in the table
Teacher…thank you so much.
Amazing video, but could you share the source code?
Help. When I followed the tutorial up to 20.25 when he clicked play and a new screen showed up. When i try to click play the screen does not come up and it just says "your file couldnt be accessed". When I go into my folder it I can open game.html however they dont linktogether.
GREAT VIDEO! THANK YOU SO MUCH!!!
is there a chance that i can put a image in these questions? im talking seperate image for each question.
plsssss anyyone?
Very helping tutorial appreciated Brian
Great video and app.
I need help
I use the HTML code of your quiz but i have a problem.
I have a question on my quiz but there is two right answer and i dont now how can i do it
Thanks
I'm using 10 questions I took from a JSON, because doing it on the js file would have been a lot of text. The problem is that I don't know how to link with Jquery AJAX, or other way, while changing only a little of the original code in your video
Hi there is there a way to make it to some questions only have two or three answers?
Awesome Work
Mano, você salvou meu TCC
você conseguiu? estou com um erro que não consigo resolver: Uncaught TypeError: Cannot set properties of null (setting 'innerText') , na linha 75 do game.js/ poderia me ajudar?
Hey, great tutorial thank you!
Quick question, any ideas of how to add one or more images per question.
Thanks for any help!
Hi, Brian. I have a doubt. I did a lot of testing and now I have a lot of names on the scoreboard. How do I remove or reset them? Please, I need help, man.
How can I import the question answers to a google sheets table? pls help mee
This guy has such a good taste for colors
Good point, and fonts too. The choices he makes just "work" together. He knows what he likes and what he likes is good.
for me as a college student this is a great tutorial! thankyou for this wonderful tutorial!!!! i learn a lot
Hi how do I plot the quiz score on a graph so I can see overtime how I am performing in order to measure my learning goals?
Hey! Also interested in this did you figure it out?
You use a library get all the data you want to fetch and display them using Chart.js
Hi Brian! How's it going?
At 25:17 you said "Transition" but you typed "Transform"
Thanks you for the content it is helping a lot! Keep it up!
hey what theme are u using by the way?
Thanks it was helpful, but what if i want to put the buttons back and forward for the quiz.
Keep a question counter
Everytime u click left button decrement it by one and when u click right button increment it by one
How can I add images in the choices instead of text ?
Why is it that my first :root for style.css file is not working already? the background colour is not changing. Im using Brackets text editor. anyone can help?
hello can i ask where the data is saving in leader board?
On which website you are working on it please tell
thanku bro
how do i create multiple right answers?
something like:
question: 'What is 2+2?',
choice1: '22',
choice2: '4',
choice3: '21',
choice4: '4',
answer: 2, 4,
What is the advantage to using the arrow function notation versus the traditional method?
it's more simple way of creating a function instead of creating it and putting it as a callback you create it directly there
BTZ JS is space sensitive so if your js code isnt running check if you have any extra spaces
What software do you use?
How to add img tag and where please tell
Thanks for doing this. I learned a lot. However, I couldn't get it to iterate through different questions; just stays on the first question. I also get an error around line 115 of game.js selectedChoice.parentElement.classlist.add(classToApply); game.js:115
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at HTMLParagraphElement. (game.js:115)
sorry, i'm very noob, but how can i create a 'explanation page' after the user select a answer? sorry my english and thank for the video!!
how can i get the full script
How can i delete someones high-score?
Hi Brain.. I would like to make it responsive for mobile too.
Hey, hopefully somebody is going to see this. But like my problem is, the page after the game does not wanna show up. After completing the questions, it says "YOUR FILE COULDN'T BE ACCESSED. May somebody help me out with this? :)
Also, GREAT VIDEO, loved watching it and using it.
Love it
@Brian thanks for the tut. I completed it, but none of my questions and answers are uploading nor is the rest working. Although I "carefully" followed along the Js part. Any help?
Hi @Fabrice Dan having the same issue the questions are not showing if the are answers correct or incorrect when clicked .Were you able to resolve it? if yes how , I have followed the video carefully but showing the error on the console "score value has been declared which is exactly the same as the video ".
@@didisimmons3177 You can view his github and figure out the error.
When I go to container designing it is not working brother
thank you
hey, what extensions you running on vs code ?
ruclips.net/video/0Ok3fGel4Ok/видео.html check this video I made
How to combine these all html ,css and js file
This is really amazing!! Can I use this on the site I'm making?
that great, but how to do it using React?
i got stuck at the start! when it says to type index.htm nothing happens ! what do I do
When the wrong answer is selected and red colour appears, how do you also show green colour on the correct answer at the same time.
good job
I would like to put timer in it? how?
Thank you
Question: If you wanted to reset the scoreboard at the click of a button, how would you go about doing that?
resetScore = e => {
window.localStorage.clear('highScores');
}
Is that a responsive quiz?
everything works but everytime I save a new highscore it doesn't add anymore to the list it just replaced the highscore with the latest score....
How do you make a similar quiz app with different results just like a Buzzfeed quiz?
Thanks I found this
But but should zoom screen
there is no link of the repository on github?
Hello! How to do a multiple correct answers for this multiple choice QUIZ??? NEED HELP... PLEASE *CRY*
can anyone tell me how to put picture inside the button?
is the repo for this project anywhere?
The progressbar doesn't work for me. Anybody could make it work? how did you do it?
How can I delete the highscores from the leaderboard? Or maybe reset it?
Hi! Do you figure it out?
resetScore = e => {
window.localStorage.clear('highScores');
}
Thanks for the tutorial,can you help with the source code
hey bro, how do you make the questions appear in an order? I used your code but the same questions sometimes appear. Like duplicate questions
where can i got code for this
Hi Brian, any chance to download the entire code?
Also if I am asking about an object, how can I add a small image?
Any way I can communicate by email?
the github should be in the comments section
@@briandesign Thanks, I have another question, where are the scores filed? How do I delete them? Or manipulate them?
I am setting up a quizz with a donated prize to be drawn, and while working on it I entered a lot of test scores.
There will be hundreds or thousands of entries for the draw.
So how can I delete the test entries?
did you found the github with is whole script?
@@amittio6446 github.com/briancodex/quiz-app-js
How do I put the final score on the end page? Like 100 or 200(whatever the person got)?
The player score is saved to local storage when Brian uses the localStorage.setItem("mostRecentScore", score) method. You can get anything saved to local storage using localStorage.getItem("variableName");
@@KeelanJon Man how do I save it to a database?
@@kerbyvalenzuela4210 That depends on the back end you are using
@@KeelanJon I feel stupid for asking this but what's a back end?
@Yusuf Bey Thanks for that, Sir! 💗
hi brian can you share the source code because i m getting a error
Can someone help me how to make CRUD in the quiz project??