Quiz-Game

JS quiz - auto next. save high score

by deannapi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript Quiz</title>
    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    <header class="page-title">JavaScript Quiz    </header>
        <p>Click the button to begin the quiz. Good Luck!</p>
            <a href="#highscore">View Highscores</a>
            <button id="start" class="button">Start</button>    
            <div class="timer">
                Timer: <span id="time"> 5:00 </span> minutes
            </div>
        
    <!--the quiz questions are here-->
    <section class="quiz">
        <div id="quiz" class="grid-container">
            
        </div>
    </section>
    <!--quiz ends-->
    <form>
        <div id="highscore" class="input-results"> 
            <label for="initials">Initials</label>
            <input type="text" name="initials" id="initials" placeholder="" />
        </div>
        <div id="msg"></div>
        <button id="save-score">Save</button>
    </form> 
    <footer>&copy; 2020 by DeAnna Martinez</footer>
    <script src="./assets/js/script.js"></script>
</body>
</html>

CSS

* {
    box-sizing: border-box;
}

:root {
    --primary: #8c031a;
    --second: #01068a;
    --third: #017e8a;
    font-size: 22px;
}

body {
    background-color: #afb2b3;
    color: black;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

header {
    background: var(--third);
    padding: 30px 30px;
    border-bottom: 5px solid var(--second);
    text-align: center;
}

p {
    font-size: 16px;
    margin: 5px 0 5px;
    margin: 10px;
    text-align: left;
}
header a {
    text-align: right;
    margin: 10px;
}

footer {
    width: 100%;
    background: var(--third);
    color: var(--second);
    font-size: 16px;
    padding: 10px;
    border-top: 3px solid var(--second);
}

.grid-container {
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 200px;
    gap: 10px;
    padding: 10px;
    font-size: 20px;
    word-wrap: normal;
    text-align: center;

}

.timer {
    color: var(--primary);
    font-size: 16px;
    font-weight: bold;
    margin: 10px;
    display: inline-block;
}

.button {
    outline: var(--second) solid 2px;
    border: var(--second);
    display: inline-block;
    padding: 5px 5px;
    margin: 10px;
    background: var(--third);
    font-size: 12px;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 70px;
}

.button:hover {
    background-color: #b7f2f7;
}

.page-title {
    color: var(--second);
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 3.0rem;
}

.quiz {
    display: inline-block;
    color: var(--second);
    background: gray;
    margin: 30px;
}

.grade {
    color: var(--primary);
    
}

JavaScript

const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const startButton = document.getElementById('start');

// questions
var questions = [
    {
        question: "1. question 1 here",
        answers: [
            "1a here",
            "1c here",
            "1d here"
        ],
        correctanswer: "1b here"
    },
    {
        question: "2. question 2 here",
        answers: [
            "2a here",
            "2b here",
            "2c here",
            "2d here"
        ],
        correctanswer: "2a here"
    },
    {
        question: "3. question 3 here",
        answers: [
            "3a here",
            "3b here",
            "3c here",
            "3d here"
        ],
        correctanswer: "3d here"
    },    
    {
        question: "4. question 4 here",
        answers: [
            "4a here",
            "4b here",
            "4c here",
            "4d here"
        ],
        correctanswer: "4b here"
    },
    {
        question: "5. question 5 here",
        answers: [
            "5a here",
            "5b here",
            "5c here",
            "5d here"
        ],
        correctanswer: "5c here"
    },
]


//timer countdown
var timerRef = null;

function startTimer() {
  var p_time = document.getElementById('time').innerHTML;
  var timeArray = p_time.split(/[:]+/);
  var min = timeArray[00];
  var sec = checkSecond((timeArray[1] - 1));
  if (sec == 59) {
    min = min - 1
  }

  document.getElementById('time').innerHTML = min + ":" + sec;

  if (min <= 0 && sec == 0) {
    clearTimeout(timerRef)
    alert("Time is up!")
    return
  }


  timerRef = setTimeout(startTimer, 1000);
}

function checkSecond(seconds) {
  if (seconds < 10 && seconds >= 0) {
    seconds = "0" + seconds
  };
  if (seconds < 0) {
    seconds = "59"
  };
  return seconds;
}

function startQuiz(questions, quizContainer) {
    var output =[];
    var answers;
    for (var i=0; i <...