How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript

[@GreatStackDev]

👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)

[@balloney2175]

Avinash is a true programmer. He knows well every corner of Javascript. Kudos!

[@deepakwaghmare3406]

That 30 javascript projects helps a lot

[@pankajmandal7204]

i completed three projects from this playlist projects are good but please its a request to please also explain the javascript code properly it will be great if you explain in detail for javascript codes because it gets hard for freshers

[@taheershaikh9184]

true what's the point of just coding

[@babarshabbir2554]

"Excellent tutorial! Clear instructions for building a quiz app with HTML, CSS, and JavaScript. Highly recommended."

[@ankitpradhan2499]

Is the code working or not...like if i coded along the video ??

[@RayquanRogers]

What’s the quotes for? I’m assuming it didn’t work for you?

[@jengainavyotakiwa]

You are a teacher, your code is clear, your way of teaching is making us easy understand the codes.

[@xMahesh]

Bro I need this code

[@knowledgebook7809]

Can't explain how far you have helped me......!! Even chatGPT was not able to solve my problem but you did....!!

[@AibekJustForStudy]

What was the problem?

[@knowledgebook7809]

@@AibekJustForStudy Thanks for asking but I don't remember right now because I posted this comment 1 year back 😅

[@sbndBhanu546]

please also tell how to put timer for each question, atlast how to put a pie chart which notices how many are correct in green and wrong as red Please provide tutorials

[@VideosViraisVirais-dc7nx]

The video has 30 minutes, But it took me 2 hours to complete. No errors or bugs ...

[@GreatStackDev]

That's okay. It take time to complete. Keep learning.

[@Ankitp8]

Can you give me Source code please?

[@RadwanBenmoussa-n6t]

It took me 2 day and I'm not finished .I don't know but I think he made it hard in the code

[@rudythorns8411]

this video struck an idea for me I am going to use a quiz and trivia page based on my own niche and maybe make money out of it --ill go ahead and consider making my own quiz app soon tnks

[@spideygaming5103]

I don't know how to thank this guy ❤ Next level ! easiest explanation .... if you are a beginner and want to enhance your skillset on JS follow this guy man

[@efuentesjr]

It'd be nice if this had (1.) Questions number limit, meaning if I have 100 questions end each session at 50 and (2.) shuffle questions function... Other than that AWESOME training video! Thanks.

[@isamsvideoediting4572]

Avinash, You are a hero. You make coding very easy for me to learn. Thank you.

[@deepakwaghmare3406]

Avinash jii javascript series op

[@babarshabbir2554]

"Excellent quiz app tutorial! Clear explanations and easy-to-follow steps using HTML, CSS, and JavaScript."

[@RayquanRogers]

Why’d you post the same thing twice?

[@patrickbanda3585]

Awesome lesson. For upcoming tutorials please use live server split the screen into two parts, one side show the code and on the other let us see the live render so we see the changes in real time throughout the tutorials. Keep up the good work.

[@yashbahuguna8135]

can you share code link for this project

[@SADDAMKHAN-tv7ro]

New viewers k liye aik guide A "question" property (string) An "answer" property (array of objects) A "text" property (string) A "correct" property (boolean)

[@orangeapple681]

Also got another question about JS syntax. Why would you code something such as correct: false correct: true vs true: no false: yes or true: 1 true: 0 false: 1 false: 0 I guess, why would one syntax be the ultimately correct way vs other ways? It makes coding look more like rote memorization vs a logical process.

[@mukarramqureshi4935]

haha

[@AsimAliKhan-h3c]

Your videos are really helpful, only thing I need to mention is when you are writing code please explain it also, dont say this format or code, explain it instead

[@crazy_lovers_zditz9986]

I follow up the whole code It really worked ......but I am unable to run the Java script yar ...... please suggest a solution ...yar Only script is not showing over the app other work too fluently. After rechecking the .....i Got the whole concept 😍😍😍 thanksss a lot for teaching this much easy way n perfectly.I really made it .😁best way uhh were teaching

[@bhoomikasn5094]

same here script is not showing what is the issue can please tell me

[@vinitkumarparmar1339]

@@bhoomikasn5094 make sure you import the js in html code at bottom

[@deepanshisinghal719]

i am facing same problem

[@dadashussein]

I want to add shuffle function const shuffleAnswers = (answers) => { for (let i = answers.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [answers[i], answers[j]] = [answers[j], answers[i]]; } }

[@philippschonherr]

Hi! Where in the source code do I have to insert this?

[@AxolotlAlex]

For those who need it: * { margin: 0; padding : 0; font-family: 'Poppins' , sans-serif; box-sizing: border-box; }

[@rutujashirke2428]

Next Level Javascript literally

[@urjaangre2216]

For those who are getting the next question's option added to the previous qsn; Just add the resetState(); to beginning of showQuestion();

[@beardedraider4751]

You have no idea how much this has helped me! Thank you!

[@SamsonA14]

This tutorial has helped me so much. Thank you, I'm now a subscriber and will be practising my javascript skills with your 30day JS code playlist.

[@Kalicharan-tu6kr]

Your java script part runs ?? mine js part does not making any changes why T_T??

[@marianobarella3191]

This is exactly what I was looking for, and you made it so simple! Thank you so much!

[@jerryudochu3496]

Wonderful tutorial. Simple and easy to follow. Can you please show me how to save the quiz in local storage and reset the local storage when you restart the quiz

[@venkatesh87689]

Thank you bro it helps me lot I successfully executed quiz website

[@victoriatamunowari2400]

Coming from someone who has been frustrated..Thank you So mmuch, This was really helpful, was what I needed

[@sangeetsargamsagar4639]

here is an easier version: Quiz App Score: 0 const questions = [ { question: "What is the capital of France?", options: ["Paris", "London", "Berlin", "Madrid"], answer: "Paris" }, { question: "Which planet is known as the Red Planet?", options: ["Earth", "Mars", "Venus", "Jupiter"], answer: "Mars" }, { question: "What is the largest mammal in the world?", options: ["Elephant", "Giraffe", "Blue Whale", "Hippopotamus"], answer: "Blue Whale" }, { question: "What is the chemical symbol for gold?", options: ["Go", "Au", "Ag", "Ge"], answer: "Au" } ]; let currentQuestionIndex = 0; let score = 0; const questionElement = document.getElementById('question'); const optionsElement = document.getElementById('options'); const scoreElement = document.getElementById('score'); function displayQuestion() { const currentQuestion = questions[currentQuestionIndex]; questionElement.textContent = currentQuestion.question; optionsElement.innerHTML = ''; currentQuestion.options.forEach((option, index) => { const button = document.createElement('button'); button.textContent = option; button.addEventListener('click', () => checkAnswer(option)); optionsElement.appendChild(button); }); } function checkAnswer(selectedOption) { const currentQuestion = questions[currentQuestionIndex]; if (selectedOption === currentQuestion.answer) { score++; } currentQuestionIndex++; if (currentQuestionIndex < questions.length) { displayQuestion(); } else { showResult(); } } function showResult() { questionElement.textContent = 'Quiz Completed!'; optionsElement.innerHTML = ''; scoreElement.textContent = `Your Score: ${score} / ${questions.length}`; } displayQuestion();

[@sambasow2816]

Hello

[@deepakwaghmare3406]

doing this project today og

[@pedropimenta896]

This is very nice, but it makes long answers verbose on the code. The code will have the answer written twice, every time.

[@PeaceAlbert-o7k]

Thanks a lot but can you help drop code for the admin dashboard that can be used to update questions to the website for a school

[@gamingdemon113]

it's bit harder for beginner in my opinion . recommended to do this after next 4-5 projects if you're new to js

[@juatv777]

Amazing Lesson. My only problem is why the quiz does not work even after writing it correctly.

[@ankurprasad]

Same here dude ...... if u get the perfect One . Will u share to the Comment ??

[@fahmimfs4134]

same here. My js has a problem, it didn't connected to the html even I has insert its link

[@ajjunior1442]

I think i'm the only one that found this hard to grasp!

[@Ashutoshदूबे]

agar kisis ko ye problem aa raha ki configuration not found to notedpad se file save karte samay .xml format laga do .txt ki jagah aur open with me jakar edge ko sel karke always use this to open xml format par click kar do mera bhi ho gaya finally

[@RAJACADEMY1]

Sir I have a doubt if I wants to add approx 10x questions then how to make data base in this type of application

[@-currentworld1825]

Learn Backbend

[@AdityaSharma-er3gs]

hey! your videos are amazing, I just want to know the best place to study about JavaScript properties which I don't know about... when I was watching this video I didn't know about 'dataset'.

[@faresta4ua]

you are the greet teacher in my learning process

[@lesterdimitresque6315]

thank you brother , your tutorials are clear and simple , great job ! subscribed

[@kandoHunter69]

well event though im beginner, i had a doubt ...Like using dataset and classList to store the correct answer is not safe right?? the user would just use developer element to get answer. It would be better to use a indexing method or logical operator operation

[@anzkhan646]

Thanks you Avinash sir ..... Done

[@alexandrabernard7548]

Merci pour tout, ce fût si facile avec vous. Very, very, very good

[@jeelu1]

If you're code is not working then call the startquiz function in the last

[@SamuelMaiva]

Nice video ,,,you made me to have no fear in JavaScript again.... thanks a lot

[@gavinwaight]

Question, how did you change the default font color of your code in VS code? My JS colors are looking different than the colors displayed here, and I really like the colors you have compared to my own.

[@prus_projektant1857]

You need to download extension to change theme of code. Extension tab is on the left site of screen. I think you Can google "theme for code VS code" and you can choose one you like and then find and download theme extension in VS

[@kunjalbhudke80]

Change the theme of VS Code from the settings option located in the bottom left corner. Each theme has its own font color.

[@henaparvin9032]

A big salute for you sir 🙇 Thank you so much .. I have learned a lot of things today

[@jayanaeverything124]

Thank so much for your tutorial, but I have problem on my code, why ${score} doesn't work?

[@jayanaeverything124]

I got the mistake it supposed to use `` , instead of ''

[@AbdullohMulkamonov]

This channal the best in You tube. Thank you for Video.

[@lengwan8973]

Thank you so much. I watched this for reference to create my portfolio .so helpful

[@Shabeerapatan]

Thank you so much , next level of explanation sir

[@hiamr4619]

Amazing tutorial but I had run into a problem in the line of code that showed the score.

[@harismalik4330]

Very Helpful and learned new things also

[@GreatStackDev]

Glad to hear that. Thank you.

[@ngnko]

Thanks a lot from Uzbekistan! I have leaned a lot from your projects :)

[@harjyotsinghgulati6603]

I have learned to much things from this video

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊

[@Priyanshu-z7g8m]

But not English

[@sureshd2555]

Thanks for ur best teaching sir. ❤😊

[@blackandblue2]

For those who are lazy, I gave the question format to chatGPT and had it create a bunch of trivia questions for me.... relating to the lord of the rings, star wars, and harry potter...

[@lakshyarajdash]

I've made one myself.. but tbe design is awesome

[@Ifelola01]

Please can you share Answers are not showing on the button

[@devanshusaran8004]

@@Ifelola01 did you got the solution?

[@femi-ayeniayodeji1264]

Me too

[@akojusowmya8626]

Sir please do a video how to integrate this website with Php & mysql

[@KrishPatel-qy8hj]

Nice Video!!! But Unfortunately not working after the Answer names!!

[@shuaibakhtar5333]

Really helpful sir.....Thankyou so much for your efforts...

[@Cheetohzz]

I love your videos so much!!! You have been teaching me so well and I can't thank you enough.

[@privateclass8105]

Please provide time set in this quiz for the next video.❤

[@mayuriagale7488]

Thank you so much ❤❤ It worked🤗🤗🤗

[@GreatStackDev]

You're welcome. 😊 Keep coding.

[@Ankitp8]

Please give me source code 🙏🏻

[@Ankitp8]

Because mine only shows answers 1 2 3 4 ... So please give me source code

[@adedokunjoseph-gd8xq]

Good day Many thanks for the great contributions to knowledge. I tried this, but the js code did not respond. I even follow it line by line just like yours. . what should I do

[@fransmoemi9707]

Thank you very much Sir🙏

[@GreatStackDev]

Glad you liked it. You are welcome! 😊

[@sravansai8990]

Nice explanation sir and easy to understand keep going 😊...

[@GreatStackDev]

Thanks a lot 😊 Keep coding.

[@tauraimashambanhaka9458]

Thank you for this Easy Tutorial. Please keep creating more JavaScript tutorials. The way you simplify code is amazing, keep up the good work.

[@diogodias_]

omg thaaaanks, i learning so mutch here, and you help-me with my project!

[@BinamLuitel]

thank you very much sir your explanation is so clear

[@meenakshimeeen]

you are doing great job... thank you so much

[@قلعةالعلم-ع8د]

thank you from Istanbul/turkey

[@therio6637]

Congratulations for 800k 😁🔥🔥🔥🔥🔥

[@vijayaragavanmr1960]

Thank you for your wonderful teaching but, want to the source code. I watch your some videos that videos don't have the source code

[@mahesh_bvn]

Well explained, thanks!

[@MdMubin-qz2sx]

If I want to add image such as a watermelon's image and say which vegetable is this ? For adding image and connect with it which things need to change actually? If I just add image of vegetables of every question's place in js , will it work?

[@LuisMedina-dk3vc]

Thank you so much. You're channel is so good.

[@pramod_laha]

bro it would be more and more helpful if you had customized the result area like adding percentage and others

[@debugdiario]

Thank you for the amazing content, but i'm facing an error: when I select the answer and click "next", instead of leading me to the next questions, it shows the score "1 out of 3". Anyone can help me?

[@PankajRaghunadhabhatla]

Hello Avinash, Nice video and very easy and simplified. I want to ask you, after making an app like this, how do we make it live or as an app. I understand that this is for tutorial. What are the next steps into it. How do we go about it. Please guide on this.

[@MalikArshad]

Usually tutorials do povide code link in the description. You haven't. The link you provided is behind a paywall.☹

[@mademen3804]

Great video, how do I add a timer to the quiz. So let's say 50 questions will have 20 minutes to answer questions.

[@nsmworldentertainment4687]

if u findout any solution regarding how to add timer pls dm me

[@tiestomate]

Hi did you find a solution how to add timer to this quiz?

[@kirankharsel2368]

❤❤ simple, easy to understand project.. thanks

[@doremon3692]

really you understand this r just copy the code

[@BECSAQUIB]

Your tutorial is awesome. Pls upload source code of project too.

[@ayeshashaikh2087]

thank you so much this code of yours help me at very crucial movement

[@raheemibrahimademola]

Please whenever I click on next button after clicking on the answer, it's not taking me to the next question. When I checked the console, it wrote "uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received". Please what what's the solution.

[@valentine8687]

Could you share the files so that we can copy the scripts please

[@soydanhakan10]

Thank you so much teacher :)

[@dianagb9770]

Back ticks are not working in my sublime text code. the regular single quotation marks make the string turn green (read like a string by JS), but when i switch to back ticks, it is white and my code breaks.

[@aminkarimi5735]

hi thank you for good tutorial do you have the source on git? how can i have the source?

[@desideneva1141]

Amazing. And how we can achieve different backgrounds(images) for each question? Thank you.

[@simpleomiii3660]

hello sir , your video are really helpful and your voice is very good i'm lot of learn in your video ..keep creating new design and hover , animation effect

[@yoursnarendra]

thank you bro but I have small doubt how to post q&a build wordpress website

[@aaravisinha3874]

Thank you so much sir for this useful video 🙏🙏

[@lucubus8403]

Avinash is a god amongst mortals.

[@kingharji9170]

Amazing work brother!

[@orangeapple681]

I'm assuming there's no reason why he chose to use an ID CSS mod instead of another div table w/ CSS mod for the 'next-btn'. Seems like personal taste/ preference? Anyone care to weigh in on that decision? I'm very new to programming so...

[@salwatalithazahrani6074]

How to add image to to the quiz?

[@paradise836]

btw largest desert in the world is Sahara

[@saxma1277]

Bro why are you changed your channel logo and name your previous logo and name were amazing and easy

[@amiralisalari6863]

Thanks a lot that was great, but what does dataset do??❤❤

[@d.lindstrom7130]

I also want to say thank you very much!

[@peteandrieciruelas9750]

Hello, may I ask if I can use this to create a forecasting assessment test on a Website?