Quiz app Javascript | Quiz app source code – codewithrandom

Quiz app Javascript | Quiz app source code – codewithrandom


Welcome to Code With Random blog in this blog we learn how to create quiz app javascript. We use HTML & CSS and javascript for this quiz app javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for quiz app javascript.

HTML code for quiz app

<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question is loading...</h2>
<input type="radio" name="answer" id="a" class="answer" />
<label for="a" id="a_text">Answer...</label>
<input type="radio" name="answer" id="b" class="answer" />
<label for="b" id="b_text">Answer...</label>
<input type="radio" name="answer" id="c" class="answer" />
<label for="c" id="c_text">Answer...</label>
<input type="radio" name="answer" id="d" class="answer" />
<label for="d" id="d_text">Answer...</label>
<button id="submit">Submit</button>

There is all HTML code for quiz app javascript. Now you can see output without CSS then we write CSS for our quiz app javascript.

quiz app javascript | quiz app source code

50+ Frontend Project With Code

CSS Part — quiz app using Javascript 

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");
* {
box-sizing: border-box;
body {
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
font-family: "Poppins", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
width: 600px;
max-width: 95vw;
overflow: hidden;
.quiz-header {
padding: 4rem;
h2 {
padding: 1rem;
text-align: center;
margin: 0;
ul {
list-style-type: none;
padding: 0;
ul li {
font-size: 1.2rem;
margin: 1rem 0;
ul li label {
cursor: pointer;
button {
background-color: #8e44ad;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
button:hover {
background-color: #732d91;
button:focus {
outline: none;
background-color: #5e3370;
Now we complete our CSS section,  Here is our updated output CSS.
quiz app javascript


Now add javascript for questions & answers!

JS part — quiz app using Javascript 

 const quizData = [
question: "Which language runs in a web browser?",
a: "Java",
b: "C",
c: "Python",
d: "JavaScript",
correct: "d",
question: "What does CSS stand for?",
a: "Central Style Sheets",
b: "Cascading Style Sheets",
c: "Cascading Simple Sheets",
d: "Cars SUVs Sailboats",
correct: "b",
question: "What does HTML stand for?",
a: "Hypertext Markup Language",
b: "Hypertext Markdown Language",
c: "Hyperloop Machine Language",
d: "Helicopters Terminals Motorboats Lamborginis",
correct: "a",
question: "What year was JavaScript launched?",
a: "1996",
b: "1995",
c: "1994",
d: "none of the above",
correct: "b",
const quiz = document.getElementById("quiz");
const answerElements = document.querySelectorAll(".answer");
const questionElement = document.getElementById("question");
const a_text = document.getElementById("a_text");
const b_text = document.getElementById("b_text");
const c_text = document.getElementById("c_text");
const d_text = document.getElementById("d_text");
const submitButton = document.getElementById("submit");
let currentQuiz = 0;
let score = 0;
const deselectAnswers = () => {
answerElements.forEach((answer) => (answer.checked = false));
const getSelected = () => {
let answer;
answerElements.forEach((answerElement) => {
if (answerElement.checked) answer = answerElement.id;
return answer;
const loadQuiz = () => {
const currentQuizData = quizData[currentQuiz];
questionElement.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
submitButton.addEventListener("click", () => {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) score++;
if (currentQuiz < quizData.length) loadQuiz();
else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correctly</h2>
<button onclick="history.go(0)">Play Again</button>
` // location.reload() won't work in CodePen for security reasons;

Now we complete our javascript section,  Here is our updated output with javascript. Hope you like this quiz app, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

Ecommerce website using html css and javascript


quiz app javascript | quiz app source code


quiz app javascript | quiz app source code

In this post, we learn how to create a quiz app using javascript with simple coding of HTML & CSS and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Quiz app Javascript | Quiz app source code – codewithrandom”

Leave a Comment