<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quiz</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
body {
    background-image: linear-gradient(to left,#86e6ec,#0eafe0);
}
 
.grid {
    width: 100vh;
    height: 90vh;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border: 2px solid #cbcbcb;
    
}
 
.grid h1 {
    font-family: "sans-serif";
    background-color: #01BBFF;
    font-size: 60px;
    text-align: center;
    color: #ffffff;
    padding: 2px 0px;
    
}
 
#score {
    color: #01BBFF;
    text-align: center;
    font-size: 30px;
}
 
.grid #question {
    font-family: "monospace";
    font-size: 25px;
    color: #01BBFF;
}
 
.buttons {
    margin-top: 30px;
}
 
#btn0, #btn1, #btn2, #btn3 {
    background-color: #01BBFF;
    width: 250px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1D3C6A;
    margin: 10px 40px 10px 0px;
    padding: 10px 10px;
}
 
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover {
    cursor: pointer;
    background-color: #01BBFF;
}
 
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus {
    outline: 0;
}
 
#progress {
    color: #2b2b2b;
    font-size: 18px;
}
#but{
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
    </style>
    
</head>
<div class="grid">
    <div id="quiz">
        <h1>Quiz</h1>
        <hr style="margin-bottom: 20px">

        <p id="question"></p>

        <div class="buttons">
            <button id="btn0"><span id="choice0"></span></button>
            <button id="btn1"><span id="choice1"></span></button>
            <button id="btn2"><span id="choice2"></span></button>
            <button id="btn3"><span id="choice3"></span></button>
        </div>

        <hr style="margin-top: 50px">
        <footer>
            <p id="progress">Question x of y</p>
        </footer>
    </div>
</div>
    <script src="quiz.js"></script>
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
}
 
Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
}
 
Quiz.prototype.guess = function(answer) {
    if(this.getQuestionIndex().isCorrectAnswer(answer)) {
        this.score++;
    }
 
    this.questionIndex++;
}
 
Quiz.prototype.isEnded = function() {
    return this.questionIndex === this.questions.length;
}
 
 
function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
}
 
Question.prototype.isCorrectAnswer = function(choice) {
    return this.answer === choice;
}
 
 
function populate() {
    if(quiz.isEnded()) {
        showScores();
    }
    else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;
 
        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("btn" + i, choices[i]);
        }
 
        showProgress();
    }
};
 
function guess(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
        quiz.guess(guess);
        populate();
    }
};
 
 
function showProgress() {
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
 
function showScores() {
    var gameOverHTML = "<h1>Result</h1>";
    gameOverHTML += "<h2 id='score'> Your score is: " + quiz.score + "</h2>";
    gameOverHTML+="<a href='/users/logout' class='btn btn-warning mt-auto' id='but'><i class='fa fa-trophy'></i> End the Quiz </a>"
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
};
 
// create questions here
var questions = [
    new Question("Hyper Text Markup Language Stand For?", ["JavaScript", "XHTML","CSS", "HTML"], "HTML"),
    new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
    new Question("Which of the following is not a Java features", ["Object-Oriented", "Architecture Neutral","Dynamic", "Pointers"], "Pointers"),
    new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"], "PHP"),
    new Question("Used to fix bugs in Java Programs", ["JVM", "JRE", "JDK", "JDB"], "JDB"),
    new Question("What is the return type of the hashCode() method in the Object class?", ["Object", "int", "long", "void"], "int"),
    new Question("Which of the following is an immediate subclass of the Panel class?", ["Applet", "Window", "Frame", "Dialog"], "Applet"),
    new Question("In which memory a String is stored, when we create a string using new operator?", ["Stack", "String memory", "Heap memory", "Random storage space"], "Heap memory"),
    
];
 
// create quiz
var quiz = new Quiz(questions);
 
// display quiz
populate();
    </script>
</body>
</html>