Card Design, JavaScript

Quiz application system in Html, CSS and JS with code

Hi, In this lesson, we will learn how to develop a quiz application using Html, CSS and javascript. In the last session, we created a Split landing page. But now let us see how to create quiz applications using javascript.

Quiz application:

This app is responsive across all devices. It has a clear background which looks cool. Then it has a box at the center which has all the content. The box has round corners due to the radius property. This box has a question at the top in black color. Then it has multiple choices which can be checked. You can only click on one option. Multiple ticks are not allowed. Below this, it has a submit button. After pressing it will show the next question with options.

After attempting all the questions it will show a screen that has new text. It’s showing the number which you got on your quiz. Then it has a button for reloading. After clicking on it you can restart your quiz. I hope you like this UI and this concept. Let us see how to create this quiz app with Html and js.

How to Create Quiz application?

The following steps will help you to build a beautiful quiz application using Html, CSS and Javascript.

Download code editor
Download the Html source code
Copy CSS code
Use Javascript code
Or download source code for free

Source code of Html:

<!--Fantacy Design-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Quiz App | Fantacy Design</title>
  </head>
  <body>
    <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">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="b" class="answer">
            <label for="b" id="b_text">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="c" class="answer">
            <label for="c" id="c_text">Question</label>
          </li>

          <li>
            <input type="radio" name="answer" id="d" class="answer">
            <label for="d" id="d_text">Question</label>
          </li>
        </ul>
      </div>
      <button id="submit">Submit</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Quiz App | Fantacy Design</title>

</head>

<body>

<h2 id="question">Question text</h2>

<ul>

<li>

<label for="a" id="a_text">Question</label>

</li>

<li>

<label for="b" id="b_text">Question</label>

</li>

<li>

<label for="c" id="c_text">Question</label>

</li>

<li>

<label for="d" id="d_text">Question</label>

</li>

</ul>

</div>

<button id="submit">Submit</button>

</div>

</body>

</html>

Source code of CSS:

Again create a file of CSS. Name it quiz.css. It will help us to manage all the content properly. It will make our app responsive across all devices. CSS will also help in coloring and font sizing etc.

@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(to right, #ff5f6d     , #ffc371);
  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;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.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-image: linear-gradient(to right, #ff5f6d     , #ffc371);
  color: #fff;
  border: none;
  display: block;
  width: 100%;
  cursor: pointer;
  font-size: 1.2rem;
  font-family: inherit;
  padding: 1.3rem;
  font-weight: bold;
}

button:hover {
  background-color: #732d91;
}

button:focus {
  outline: none;
  background-color: #5e3370;
}

@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(to right, #ff5f6d , #ffc371);

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;

box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;

}

.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-image: linear-gradient(to right, #ff5f6d , #ffc371);

color: #fff;

border: none;

display: block;

width: 100%;

cursor: pointer;

font-size: 1.2rem;

font-family: inherit;

padding: 1.3rem;

font-weight: bold;

}

button:hover {

background-color: #732d91;

}

button:focus {

outline: none;

background-color: #5e3370;

}

Source code of javascript:

Once again create a file of javascript of name it quiz.js and save it in the same folder. Javascript will help us to add functionality to our project. It has the functionality of buttons and clicking options etc. All this happening just because of 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 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>
            `
        }
    }
})

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>

}

})

Therefore, by using the above method you can create this quiz system on your device. If you are still unable to create it or facing any error. Don’t worry we have a solution.

We have a file that has all these files. You have to download that file from the below download button. Then extract the files. And run an Html file.

If you find this post helpful then must like, share and comment. If you have any suggestions then must share them with us.

Thanks for reading this article.

Download Source File