Create a Multiple Choice Quiz App Using JavaScript | JavaScript Project For Beginners
HTML-код
- Опубликовано: 25 июл 2024
- CODE EXPLAINED SAYS Hi!
Today we're going to create a multiple choice quiz using JavaScript and HTML, in this quiz, the user will have to choose the correct answer out of three choices, in less than 10 seconds, if the user didn't answer the question in 10sec, it will go to the next question automatically, and the question is marked wrong. the user has a progress bar, that shows the total number of question, and also if the user answered a question correctly or not.
The tutorial has two parts, the 1st part is about the logic behind the code, as we are not going directly to type in the code. And then the 2nd part where we will type in the code.
If you want to follow along with me when I type in the code, you'll need to download the starter template from GitHub.
-----------------------------------------------------------------------------------------------------
| LINKS |
-----------------------------------------------------------------------------------------------------
DOWNLOAD SOURCE CODE + STARTER TEMPLATE:
www.codeexplained.org/2018/10/...
🌍 Social Media Links.
◾ Facebook : / code.explained.official
◾ Twitter : / code_explained
◾ Instagram : / code.explained.official
◾ GitHub : github.com/CodeExplainedRepo
💲 Suppport the Channel
Paypal : paypal.me/CodeExplained
Buy Me a Coffee: www.buymeacoffee.com/CodeExpl...
-----------------------------------------------------------------------------------------------------
| HASH TAGS |
-----------------------------------------------------------------------------------------------------
#JavaScript #beginners #jstutorials
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
![Young Nudy - John Wayne (feat. Metro Boomin) [Official Video]](http://i.ytimg.com/vi/NY8HnYYo2fo/mqdefault.jpg)
💥 Hi everyone, thanks for watching and I hope you learnt a lot! Please remember to like and subscribe: cutt.ly/CodeExplained
👊 Have a great day! and keep on learning.
☕️ If you feel that my videos help you, consider supporting me: www.paypal.me/CodeExplained 🙌
Thank you so much for showing the planning phase before coding and the connection between html elements and the JS. It's so useful for beginners who are in the process of building the image in their head and not able to make immediate connections between pieces of code. It's so rare to find this in code along tutorials so big props to you!
Coming across this tut and it’s clinical explanation , I had no choice than to like and subscribe your channel. Please make more videos like this so we can become a pro like you. If possible create a forum where programmers like us can connect and build projects and learn from each other. Ty
One of the best coding tutorials ever. This visual learner's paradise really turbocharged my learning, especially of objects, where I was struggling. Thank you!
This is what I wish tutorials were actually like. Thank you for explaining instead of just doing with no understanding of why.
Happy to hear that, thanks 💖
Every JS videos you made are amazing, this one is the one of the great as well. Thanks!
You're welcome, and thank you :)
high quality production, very informative and calming voice. wish more people knew about you!
Thanks a lot.
Fantastic Tutorial - really love the structure too. Great stuff! looking forward to making my own now :)
thanks.
I couldn't learn programming without this channel! Thanks a lot
what a nice channel, keep it up. never give up.
this is a new style tutorial video on youtube
Thanks
Thanks a lot again. Your videos are very good. You are explaining all the details very well.
I really like how you break down the logic in every phase. I learned a lot with this video. Thanks for making it!
Happy to hear that. and thanks
Very, very and very good videos my friend. Please keep making them, you are helping us alot!
Love this channel. Super helpful, thanks a lot!
ps I subbed
Good! It works! Thanks.
You are seriously amazing for this! You are an amazing teacher!!!
Thank you @sam.
Awesome Sir. May u live long . Thanks Sir. Very help ful
You're doing a great job ...Many thanks to you
Great Video Thanks!
Thanks! Great script!
very helpful thank you kind sir
Thanks a lot. Like Sam Luedde said, you are an amazing teacher.
Thanks a lot
One of the best tutorial ! thank you so much.
Thanks
very clear tutorial. keep it up, sir! I hope to see more videos from you.
Thank you, and of course you'll see more videos.
Really hard to know which is better: The tutorial or your explanation... Congratulations!
Thanks, happy to hear that
A great post - very, very helpful. Thank you so much :-)
Thanks, and You're welcome.
great tutorials I appreciate way of u explained ... hands up thanks bro
Thanks and you're welcome.
An excellent, informative and very useful project! keep up the good work!
Thanks.
I love this content
thank you so much for making this! I'm learning about coding now and your video is very useful.
Happy to hear that :)
Very well explained,keep it up🔥🤝Ps:more videos on Js🙌
Thank you very much to help!
Nice to hear that.
Thanks a lot friend.. It really help me in my project.
Happy to hear that.
I like your way to explain JS code. Your videos are very good....🤓
Happy to hear that, thanks 💖
This was so helpful, thanks!
I'm so glad to hear this from you, thanks a lot 💖
The Best teacher, thanks.
Thanks, happy to help.
Thank you！👍
Thank you too!
Very very very usefull!!!!! Thanks a lot of bro!
Happy to hear that, Thanks!
thanx bro it really helped me..!
Glad it helped
Hi there:) Thank you for this great video! I have a question- if instead of questions I need to display video and instead of answers I need to display images. How should I do this?
You are very good in explaining thanks
thanks and you're welcome.
I would like to have more in-depth information displayed after answering the question. How would I go about adding additional info after the question is answered?
Very nice video! I would like to use your code as a base to do quizzes for my videos. How do you prefer to get mentioned there? :)
Thanks.
Yeah you can use any code you want.
I don't know how, do what you can do.
@@CodeExplained Thank you :)
very helpful please make more video like these.
Happy it was helpful, And of course I will.
This is the best tutorial because of explanation.
Happy to hear that. Thanks!
Thanku soo much love u
Happy to hear that, Thanks!
Wow... That is, I call the tutor.. Thanks....
Thanks a lot, happy to hear that.
great work
Thanks
Thank you so much 😍
You're welcome 😊
You deserves the gold play button 💯🤓
Happy to hear that, thanks 💖
Great explanation
Happy to hear that, thanks.
Awesome video! Thank you for uploading this. I just started to learn about web programming especially Java Script. I am a Physics teacher and I want to deliver my exam online so kids can do it at home. My idea is a multiple choice test with 5 answer options (A,B,C,D and E), maybe using radio button so the kids can change their answer if necessary, it also enables me to attach pictures on the questions or the answers (probably requires database system to store data), and it is being count-timed down let's say 90 minutes for one session. Once the time has finished, the test automatically submits the result. The kids can skip the questions they think is/are difficult and come back later (if they have time left). When they're done, they click finish button and get their instant score. The score and their answers report also being stored in database. Is there anyway you can help me making video tutorial how it can be done? :) Thank you!
I can help, but I'm really busy for the moment. sorry
thx i tweeted this n posted it on LinkedIn
Thanks a lot.
Hi, loved the tutorial, very helpful!
I finished the tutorial but now I'd like to remove the pictures and the timer but when I do so my questions remain in the same position. I have the questions displaying one below the other. I'd like to now move them all the way to the left where the picture was or center them. Is this to do with the CSS? Thanks
Yeah just CSS
What a fantastic tutorial! Thanks! Is it also possible to add some images to the questions in this multiple choise quiz?
For example a bag of apples with 10 + 4 apples?
Thanks.
And yeah of course you can achieve that.
A quick question can you reset the score when user plays the second game... right now, it counts out of 200% for the next game if you restart it. Thanks :)
Thanks a lot, I'm trying to make a game similar to this so this really helps :)
I can't show the smiley picture though for the score result and I'm not sure why :(
check the console
is there a way to ask user to input new questions and answer and save it in the existing question array pool. can you shown me how i can do that, that will be helpful.
do you think i can add "play again" button and function it i try to solve it but i like to ask a posblity
Thanks for video, I loved it :D i wonder, is it possible to make different way for importing questions? Because it is quite impractical to add questions this way :S Let's say I want to make quiz with 1000, 2000 questions, how can i make it to import questions directly in app? Maybe in admin version or something like that? Once again, thanks for this tutorial, helped me a lot :)
I'm so glad to hear that from you, thanks a lot 💖
A JSON file will do the job.
TOP
thanks
Hey thank you so much this video has been such great help. How would the JS look if I wanted the timer to count down and for the user to get all remaining questions wrong once the time hits 0?
Just figured out how to get it to countdown
That's great!
@@adrianandrews994 Hi there! Im currently trying to figure this out. How did you accomplish this?
can you please make a video on how to make a feedback form in HTML and how to embed it on my website..
yes
Thank You so much.
You're welcome @yuksel_bey.
The Tutorial was made especially for you!
I know Thank you so much again. I have been waiting for it. I appreciated. You are explaining very well. I watched many videos your explanation is very well. Hard to find project base lessons like yours. I hope soon we can see your project base Javascript Lessons. Thanks a lot.
Thank you as well. and of course I will make more tutorials :)
It's hard to find project base HTML, CSS, and JavaScript lesson. I hope you can make a website with HTML, CSS, and JavaScript those maybe 10-15 lessons series. Kinda I want to make a website with HTML-CSS and Javascript. English is my 3rd language but your lesson-explanation is so clear. Thank you so much again.
I have a lot of projects in mind, I just don't have enough time to do all of them, and keep in mind, that every single tutorial takes a lot of my time.
Great video, any ideas on how you can allow for 2 answers to be correct instead of just 1? tried using || and && but neither work xP
I think you need to put the answers inside an array, and loop through the array when checking for the right answer.
Hello sir
You explain very well
But I have one doubt
How to insert image in place of text in choice
Add an image tag instead.
very good and helpful video. Just tried to remove the images and put my own, but it doesn't load them.
Check your console log.
Hi bro, I like your tutorial.
If I have thousands quiz,
I would like to know how to create a randomly 20 questions,
Thanks 👍
Happy to hear that, thanks 💖
Use Math.random() to generate numbers from zero to 1000.
3:00 Why do you use = document.getElementById(" ") and not = document.querySelector(" ").
Is there a difference?
Hello, sorry to bother you but when i open it I get a box with 'start quiz!' inside it and clicking on it does nothing. In my apps, there is an error said "Passing error:the keyword 'const' is reserved". What should i do?
Which ide u are using here!? And thank u for this video
I think it was brackets.io
can you please explain how to export this quiz onto wix website
In one word ....amazing
But unfortunately I didn't understand it 100% , coz I am still beginner js and I have problem in parameters in function , can u give any advise in order to understand it 100% ?
Again 10x 4 ur efforts
Go w3schools.com and learn the basics about JavaScript Functions. Or you can watch one of my videos, that talks about them.
I am apperciate ur efforts , but can u suggest to me any simple videos of yours
Note: I am already understand the function but my problem is with the parameters inside it .
Check my channel.
Try newboston aswell
@@NoOne-om9bb I don't understand what do u mean bro
cloud you please make tutorial series of java script by giving examples ...?
I'll try. thanks
can anyone help me? how can i save the score to firestore database?
Hello Prof @Code Explained, i wanna upgrade this app using the following features.
time limit as a whole (not for a question)
negative marking
submit
Will you pls tell me how can i do that?
Did you figure out how to do that ?
@@CodeExplained yup sir! I was using single qoute 😂😂
@codeexplained i am not getting the final percentage with image even after writing the same code...can you help me with that or explain why it is happening
can I see your code for that part?
Thank you for the great tutorial I followed your steps but in min 33:40 document.getElementById(runningQuestion).style.backgroundColor
I had error (Uncaught TypeError: Cannot read property 'style' of null)
could you please help me
Open your console, and debug your code.
did you find a solution
The only problem in this is Questions are already created.. I need an aap in which questions are not created before
Sir pls make some more videos !!!!!!
I will.
Why do you have multiple versions of this code? Your class names changed. Other things changed.
why is meta viewport tag not working in this code?
Are you 100% sure you really tried putting the following in your code?
Can you make video on same quiz. But with the jquery?
Sorry I don't use JQuery at all.
@@CodeExplained ok
I made it
Hey man I have a error in renderprogress function
What's the problem?
But I have a 2 correct answers and 2 wrong answers...which condition I have used?
Did you find out how to do it?
The progress bar is not working in my js file, the timer is not responding too.... What's the problem
Hey did you fix the issue?
Sir Please Make Wish_List using JS
1st add wishlist __ moving Wishlist to Cart item...???
Your code doesnt work on phone if I press start quiz
It has to work.
I can't add more than 7 questions. is there a limit?
No you can add as many questions as you want.
Code Explained nermind im just stupid
The effort is really good. But the code is not responsive. It should be written in such a way that it should be responsive.
Sorry for that It's a JavaScript tutorial not CSS.
Hello, sorry to bother you but I am not sure what I've done wrong. I typed what you did (letter for letter and have checked about 5 times!) and it doesn't work - when i open it I get a box with 'start quiz!' inside it and clicking on it does nothing. any idea what I've done wrong as I can't seem to find anywhere that I have written something different than you??
When you click on it. does something shows up in the console?
@@CodeExplained no, nothing happens at all except the outline of the box changes colour from green to grey
Exactly same problem here!
I have looked at all I could, made all the corrections I understood, yet nothing is showing.
I checked my browser if JavaScript is enabled and YES, it is but it seems this JavaScript is just not running.
I finally figured it out and its working now. Here is what I did:
Under "//create our questions", I commented-out " const question=document.getElememtById("question");"
Then under "//create our questions", I changed " let question = ..." to "const questions = ...".
And that's all, everything works fine after that!
Its not creating the circles for the 3 questions
That's a CSS issue.
are you using notepad??
Nope, I used brackets.io
imgSrc dosent seems to work
it says unexpected token imgSrc
Unexpected Token errors are a subset of SyntaxErrors and, thus, will only appear when attempting to execute code that has an extra (or missing) character in the syntax, different from what JavaScript expects
plz modify it and make it responsive.
(y)
Please 😖😖😖😖
Hello sir
You explain very well
But I have one doubt
How to insert image in place of text in choice
Just some little changes and you'll get what you want.
Hello sir
You explain very well
But I have one doubt
How to insert image in place of text in choice
Little changes in your code and you'll do it.