Quiz app -JavaScript

1. Initialize the project

npm init js-project QUIZ

2. cd the project

cd QUIZ

3. Open the editor

code .

First lets list all folders and files

In order to build a QUIZ app we need to have some data and build functions necessary.

main.js

const quizDdata =  [
{
question: "Capital of Moldova?",
a: "Chisinau",
b: "Bogota",
c: "Madrid",
d: "Istanbul",
correct: "a"
},{
question: "Capital of Colombia",
a: "Chisinau",
b: "Bogota",
c: "Madrid",
d: "Istanbul",
correct: "b"
},{
question: "How many continents are?",
a: "2",
b: "4",
c: "7",
d: "8",
correct: "c"
},{
question: "What's my name?",
a: "Juan",
b: "Stela",
c: "Elena",
d: "Auristela",
correct: "b"
},{
question: "Latin language?",
a: "Romanian",
b: "Russian",
c: "Slovakian",
d: "Ukrainian",
correct: "a"
}]
const quiz = document.getElementById("quiz");
const answerEls = document.querySelectorAll(".answer");
const questionEl = 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 submitBtn = document.getElementById("submit");

let currentQuiz = 0;
let score = 0;
loadQuiz();
function loadQuiz() {
deselectAnswers();
const currentQuizData = quizData[currentQuiz];
questionEl.innerText = currentQuizData.question;
a_text.innerText = currentQuizData.a;
b_text.innerText = currentQuizData.b;
c_text.innerText = currentQuizData.c;
d_text.innerText = currentQuizData.d;
}
function getSelected() {
let answer = undefined;
answerEls.forEach((answerEl) => {
if (answerEl.checked) {
answer = answerEl.id;
}});
return answer;
}
function deselectAnswers() {
answerEls.forEach((answerEl) => {
answerEl.checked = false;
});
}
submitBtn.addEventListener("click", () => {
const answer = getSelected();
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++;
}
currentQuiz++;
if (currentQuiz < quizData.length) {
loadQuiz();
} else {
quiz.innerHTML = `
<h2>You answered correctly at ${score}/${quizData.length} questions.</h2>
<button onclick="location.reload()">Reload</button>`;
}}});

index.html

style.css

body {
background-color: #b8c6db;
background-image: linear-gradient(315deg,#b8c6db 0%, #f5f7fa 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins",
sans-serif;
margin: 0;
min-height: 100vh;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100,100,100,0.1);
overflow: hidden;
width: 600px;
max-width: 100%;
}
.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;
border: none;
color: white;
cursor: pointer;
display: block;
font-family: inherit;
font-size: 1.1rem;
width: 100%;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
background-color: #5e3370;
outline: none;
}

Happy Coding !

scapsa0116 - Overview

Stela Capsa - Software Engineer - Samplepop Technologies Inc. | LinkedIn