Skip to content

Instantly share code, notes, and snippets.

@ibrahim-dogan

ibrahim-dogan/bootstrap_quiz.html

Last active December 2, 2020 20:29
Show Gist options
  • Save ibrahim-dogan/56567b2080ab83ab80acdac186cad1e5 to your computer and use it in GitHub Desktop.
Save ibrahim-dogan/56567b2080ab83ab80acdac186cad1e5 to your computer and use it in GitHub Desktop.
Download ZIP
Very Simple Quiz made with Bootstrap
Raw
bootstrap_quiz.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1 class="text-center my-5">Welcome to quiz</h1>
<div id="question-card" class="card mx-auto mb-3">
<div id="question-number" class="card-header">
Question 1
</div>
<div class="card-body">
<h5 id="question-text" class="card-title">Inside which HTML element do we put the JavaScript?</h5>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios1" value="a"
checked>
<label id="a-text" class="form-check-label" for="radios1">&lt;scripting&gt;</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios2" value="b"
checked>
<label id="b-text" class="form-check-label" for="radios2">&lt;script&gt;</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios3" value="c"
checked>
<label id="c-text" class="form-check-label" for="radios3">&lt;js&gt;</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios4" value="d"
checked>
<label id="d-text" class="form-check-label" for="radios4">&lt;javascript&gt;</label>
</div>
<button id="next-button" type="button" class="btn btn-primary my-3">Next</button>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
let questionArray = [
{
question: "Inside which HTML element do we put the JavaScript?",
a: "<scripting>",
b: "<script>",
c: "<js>",
d: "<javascript>",
answer: "b"
},
{
question: "2Inside which HTML element do we put the JavaScript?",
a: "<scripting>",
b: "<script>",
c: "<js>",
d: "<javascript>",
answer: "b"
},
{
question: "3Inside which HTML element do we put the JavaScript?",
a: "<scripting>",
b: "<script>",
c: "<js>",
d: "<javascript>",
answer: "b"
},
{
question: "4Inside which HTML element do we put the JavaScript?",
a: "<scripting>",
b: "<script>",
c: "<js>",
d: "<javascript>",
answer: "b"
},
{
question: "5Inside which HTML element do we put the JavaScript?",
a: "<scripting>",
b: "<script>",
c: "<js>",
d: "<javascript>",
answer: "b"
},
];
const questionNumber = document.querySelector('#question-number');
const questionText = document.querySelector('#question-text');
const aText = document.querySelector('#a-text');
const bText = document.querySelector('#b-text');
const cText = document.querySelector('#c-text');
const dText = document.querySelector('#d-text');
const nextButton = document.querySelector('#next-button');
let currentQuestion;
let index = 0;
let correctAnswers = 0;
let incorrectAnswers = 0;
function checkAnswerIsCorrect() {
const selectedOption = document.querySelector('input[name="radios"]:checked').value;
if (selectedOption === currentQuestion.answer) {
correctAnswers++;
} else {
incorrectAnswers++;
}
}
function save() {
localStorage.index = index;
localStorage.correctAnswers = correctAnswers;
localStorage.incorrectAnswers = incorrectAnswers;
}
nextButton.addEventListener('click', () => {
$('#question-card').fadeOut();
$('#question-card').promise().done(function () {
checkAnswerIsCorrect();
if (index + 1 < questionArray.length) {
index++;
} else {
alert(`Correct Answers: ${correctAnswers} Incorrect Answers: ${incorrectAnswers}`)
index = 0;
correctAnswers = 0;
incorrectAnswers = 0;
}
showCurrentQuestion();
$('#question-card').fadeIn();
save();
});
});
function showCurrentQuestion() {
currentQuestion = questionArray[index];
questionNumber.innerHTML = "Question " + (index + 1)
questionText.innerHTML = currentQuestion.question;
aText.textContent = currentQuestion.a;
bText.textContent = currentQuestion.b;
cText.textContent = currentQuestion.c;
dText.textContent = currentQuestion.d;
}
function load() {
if ('index' in localStorage) index = Number(localStorage.index);
if ('correctAnswers' in localStorage) correctAnswers = Number(localStorage.correctAnswers);
if ('incorrectAnswers' in localStorage) incorrectAnswers = Number(localStorage.incorrectAnswers);
}
load();
showCurrentQuestion();
</script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>
@ibrahim-dogan
Copy link
Author

You can preview it from here: Preview Link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment