To build this Quiz App, you’ll need three files: an HTML file, a CSS file, and a JavaScript file. Once you’ve created these files, copy the provided source code and paste it into your text editor. Customize it to fit your requirements, or simply download the source code files for this Quiz App using HTML, CSS, and JavaScript from the provided download button.
HTML Code
Begin by creating an HTML file (index.html) and paste the provided code into your CSS file.
<div class="quiz-container" id="quiz"> <div class="quiz-header"> <h2 id="question">Question Text</h2> <ul> <li> <input type="radio" name="answer" id="a" class="answer"> <label for="a" id="a_text">Answer</label> </li> <li> <input type="radio" name="answer" id="b" class="answer"> <label for="b" id="b_text">Answer</label> </li> <li> <input type="radio" name="answer" id="c" class="answer"> <label for="c" id="c_text">Answer</label> </li> <li> <input type="radio" name="answer" id="d" class="answer"> <label for="d" id="d_text">Answer</label> </li> </ul> </div> <button id="submit">Submit</button> </div>
CSS Code
Next, create a CSS file (style.css) and paste the provided code into it.
/* coding with nick */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
box-sizing: border-box;
}
body{
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7f7 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;
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: #03cae4;
color: #fff;
border: none;
display: block;
width: 100%;
cursor: pointer;
font-size: 1.1rem;
font-family: inherit;
padding: 1.3rem;
}
button:hover{
background-color: #04adc4;
}
button:focus{
outline: none;
background-color: #44b927;
}
JavaScript Code
Finally, create a JavaScript file (script.js) and paste the provided code into it.
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 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 deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
}
function getSelected() {
let answer
answerEls.forEach(answerEl => {
if(answerEl.checked) {
answer = answerEl.id
}
})
return answer
}
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 ${score}/${quizData.length} questions correctly</h2>
<button onclick="location.reload()">Reload</button>
`
}
}
})
That’s it! You’ve successfully created a Quiz App using HTML, CSS, and JavaScript. If you encounter any issues or errors, feel free to download the source code from the provided download button.
We hope you find this blog helpful.
