Last active
December 2, 2020 20:29
-
-
Save ibrahim-dogan/56567b2080ab83ab80acdac186cad1e5 to your computer and use it in GitHub Desktop.
Very Simple Quiz made with Bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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/bootstrap@4.5.3/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"><scripting></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"><script></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"><js></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"><javascript></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/bootstrap@4.5.3/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/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> | |
| --> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You can preview it from here: Preview Link