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

Подписаться 1 млн

Просмотров 372 тыс.

50% 1

Learn How To Make Quiz App Using JavaScript | Build Online Quiz App With HTML CSS & JavaScript | Quiz Website design
#JavaScript #JavaScriptProjects #QuizApp
👉 Download 30 JavaScript projects Source Code (Including Quiz App):
greatstack.dev/go/30-js-projects
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video you will learn to make an Online Quiz website or Quiz App with HTML, CSS and JavaScript.
How this quiz app works:
In this quiz app we can add multiple questions and 4 answer choices for each questions. When you select any one answer the the answer button's background color will become green if it is correct answer and the background color will become red if it is wrong answer.
After selecting one answer you can not change the answer, you can only go for next question.
Display quiz score or result:
When user will submit the answer of last question and click on the next button. Then it will display the score.
Use of Quiz App Project:
Students can use this JavaScript quiz app project for their college project and any Job seeker can add this JavaScript quiz app project in their portfolio or resume.
Beginners tutorial on HTML & CSS: • HTML And CSS Tutorial ...
JavaScript quiz app, JavaScript quiz project, JavaScript quiz tutorial, quiz app JavaScript, quiz website using JavaScript, quiz web app, quiz web app using JavaScript, JavaScript projects for beginners, JavaScript projects for students, JavaScript tutorial, JavaScript project for college students, college project in javascript
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iamavinashkr

Опубликовано:

14 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 395

@balloney2175 Год назад

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

@isamsvideoediting4572 Год назад

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

@beardedraider4751 Год назад

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

@spideygaming5103 8 месяцев назад

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

@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.

@marianobarella3191 4 месяца назад

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

@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 😅

@henaparvin9032 10 месяцев назад

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

@victoriatamunowari2400 9 месяцев назад

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

@patrickbanda3585 10 месяцев назад

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 10 месяцев назад

can you share code link for this project

@ngnko 10 месяцев назад

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

@Cheetohzz 9 месяцев назад

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

@lengwan8973 8 месяцев назад

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

@rudythorns8411 7 месяцев назад

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

@kevindong4303 Год назад

Thank you! Informative and easy to follow!

@user-qo2zl4bi9k 6 месяцев назад

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

@user-kv6bl8ct9g Год назад

Hi I really enjoyed this, you have a really great style of presenting and not talking overly quickly. I have subscribed and would like to join up. I wonder if I could get some help with this code for a work project I am doing.

@lesterdimitresque6315 Месяц назад

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

@jengainavyotakiwa Год назад

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

@xMahesh 10 месяцев назад

Bro I need this code

@cathydon779 8 месяцев назад

thank you! This was very helpful and I learnt a lot!

@sureshd2555 10 месяцев назад

Thanks for ur best teaching sir. ❤😊

@user-cg4ji1fd4k Год назад

thank you very much sir your explanation is so clear

@venkatesh87689 2 месяца назад

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

@diogodias_ 10 месяцев назад

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

@therio6637 Год назад

Congratulations for 800k 😁🔥🔥🔥🔥🔥

@alexandrabernard7548 4 месяца назад

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

@faresta4ua 6 месяцев назад

you are the greet teacher in my learning process

@LuisMedina-dk3vc 5 месяцев назад

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

@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

@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.

@aaravisinha3874 8 месяцев назад

Thank you so much sir for this useful video 🙏🙏

@ayeshashaikh2087 10 месяцев назад

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

@anzkhan646 7 месяцев назад

Thanks you Avinash sir ..... Done

@babarshabbir2554 25 дней назад

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

@babarshabbir2554 28 дней назад

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

@ankitpradhan2499 27 дней назад

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

@BECSAQUIB 8 месяцев назад

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

@TechBasicConcepts 9 месяцев назад

Thank you for the educative tutorial

@bendillolj8756 Год назад

thankyou this is a big help for me!

@user-st3je9jz1r 10 месяцев назад

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

@kirankharsel2368 4 месяца назад

❤❤ simple, easy to understand project.. thanks

@doremon3692 2 месяца назад

really you understand this r just copy the code

@rutujashirke2428 4 месяца назад

Next Level Javascript literally

@target500milliontradersinv5 8 месяцев назад

HTML,CSS part is seems easy, but I felt so difficult in javascript part. Kindly give tutorial on whole javascripts concepts you have used in here, 30 days js projects and other projects too. Please so helpful to undestand the concept and get the job

@snehankiwagh1 8 месяцев назад

can you share the source code for QUIZ APP github link will do!!

@soydanhakan10 4 месяца назад

Thank you so much teacher :)

@PankajRaghunadhabhatla 6 месяцев назад

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.

@jerryudochu3496 2 месяца назад

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

@AbdullohMulkamonov Год назад

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

@yuvi6930 7 месяцев назад

Outstanding Tutorial keep it up bro ✨

@dadashussein 11 месяцев назад

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?

@MagicocoCoding-uj6mp Месяц назад

Amazing work, thanks so much

@desideneva1141 6 месяцев назад

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

@d.lindstrom7130 Месяц назад

I also want to say thank you very much!

@ashokbishwas 7 месяцев назад

best of the best video. keep making such nice videos. I am gonna pay another 5 dollars for another project.

@lakshyarajdash Год назад

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

@Cryptomaniac_mike Год назад

Please can you share Answers are not showing on the button

@devanshusaran8004 10 месяцев назад

@@Cryptomaniac_mike did you got the solution?

@femi-ayeniayodeji1264 9 месяцев назад

Me too

@TheKnight001 Год назад

Sir, please can you make a video on how to add netlify cms to an existing netlify website...? Please 🥺

@target500milliontradersinv5 8 месяцев назад

the tutorial is great and awesome

@piyush0mandloi 6 месяцев назад

thank you sir for this awesome content

@AdityaSharma-er3gs 3 месяца назад

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'.

@privateclass8105 Год назад

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

@user-vn8ew2cm4b 4 месяца назад

thank you from Istanbul/turkey

@urjaangre2216 5 дней назад

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

@sanikadeokule3545 4 месяца назад

Amazing! thank you so much

@gavinwaight 8 месяцев назад

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 8 месяцев назад

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 2 месяца назад

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

@paradise836 Месяц назад

btw largest desert in the world is Sahara

@lukekoletsios3236 11 месяцев назад

thank you for the tutorial!

@SoniKumari-yn3lp 8 месяцев назад

Bro, You are awesomeeeeeeeeeeee.......☺☺☺🤗.Stay focused

@orangeapple681 3 месяца назад

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.

@harjyotsinghgulati6603 7 дней назад

I have learned to much things from this video

@GreatStackDev 6 дней назад

Glad you liked it. Thanks for your comment. 😊

@kandoHunter69 2 месяца назад

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

@Ghulammustafa-wg6cy Год назад

Sir make one video on the search filter using JS

@aminkarimi5735 9 месяцев назад

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

@saxma1277 11 месяцев назад

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

@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 8 месяцев назад

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

@pramod_laha 5 месяцев назад

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

@juatv777 9 месяцев назад

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

@ankurprasad 5 месяцев назад

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

@fahmimfs4134 4 месяца назад

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

@Aditya_Soni_23 9 месяцев назад

tyyy man! it helped me so much

@invisiblegamer1468 Год назад

Can we have some videos related PHP projects ????

@44aliano Год назад

Thank you again

@gamingdemon113 4 месяца назад

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

@user-vn8ew2cm4b 4 месяца назад

thank you sooo much for you

@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

@easyprogramminglessons2943 Год назад

cool quiz sir

@barenyabinayak3255 7 месяцев назад

Thanks 🙏

@kysudien Год назад

thank you❤

@yoursnarendra Год назад

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

@akojusowmya8626 6 месяцев назад

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

@peteandrieciruelas9750 2 месяца назад

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

@EbukaArinze Год назад

Awesome

@vishwasankar14 10 месяцев назад

Thank you soo much sir

@zareelkalam3368 7 месяцев назад

Thank you..

@NimoKahiye-ym9xk Год назад

Thank you so much

@adedokunjoseph-gd8xq 5 месяцев назад

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

@researchchannel1767 7 месяцев назад

Hey, can you adjust something like for math quiz?

@AxolotlAlex 5 месяцев назад

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

@MdMubin-qz2sx 27 дней назад

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?

@RAJACADEMY1 8 месяцев назад

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

@SaiKiran-pu9zy 11 месяцев назад

Thank you ❤

@deepakphotography1435 Год назад

Very Nice

@Music_soul21 Год назад

Can you make a q and a website with a specialist suggestions...... website

@opaulomatias 10 месяцев назад

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?

@sangeetsargamsagar4639 8 месяцев назад

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();