<repo_name>davidyi0529/Speedquiz_D<file_sep>/script.js
function initQuiz() {
        let timeRemaining=0;
    
    
    let questions = [
        {
            title: "Question 1: What tag is used to specify a section of text that provides an example of computer code?",
            choices: ["caption", "code", "!DOCTYPE", "embed"],
            answer: "code"
        },
        {
            title: "Question 2: What tag can be used to insert a line break or blank line in an HTML document?",
            choices: ["br", "body", "head", "title"],
            answer: "br"
        },
        {
            title: "Question 3: What tag is used to define a standard cell inside a table?",
            choices: ["td", "h1", "button", "footer"],
            answer: "td"
        },
        {
            title: "Question 4: What element is a container for all the head elements, and may include the document title, scripts, styles, meta information, and more?",
            choices: ["head", "br", "body", "title"],
            answer: "head"
        },
        {
            title: "Question 5: What is the CSS property that is used to specify the edges of a table?",
            choices: ["Fill", "Boxes", "Margins", "Borders"],
            answer: "Borders"
        },
        {
            title: "Question 6: What is the CSS property that sets the size of the whitespace outside the borders of the content?",
            choices: ["Line", "Spacer", "Margin", "Block-level"],
            answer: "Margin"
        },
        {
            title: "Question 7: What is the name of the property used to specify the effects displayed behind all elements on a page?",
            choices: ["Bottom Layer", "Background", "Border", "Transparency"],
            answer: "Background"
        },
        {
            title: "Question 8: What is the element used – and hidden – in code that explains things and makes the content more readable?",
            choices: ["Comparisons", "Comments", "Quotations", "Notes"],
            answer: "Comments"
        },
        {
            title: "Question 9: What is the object called that lets you work with both dates and time-related data?",
            choices: ["Dates", "Time-warp", "Time field", "Clock"],
            answer: "Dates"
        },
        {
            title: "Question 10: What is a JavaScript element that represents either TRUE or FALSE values?",
            choices: ["Boolean", "RegExp", "Condition", "Event"],
            answer: "Boolean"
        }
        
    ];
        
        let startButtonEl = document.getElementById("start-button");
        let timeRemainingEl = document.getElementById("time-remaining");
        let finalScoreEl = document.getElementById("final-score");
        let numQuestions = questions.length;
        let landingContainerEl = document.getElementById("landing-container");
        let quizContainerEl = document.getElementById("quiz-container");
        let finalContainerEl = document.getElementById("final-container");
        let submitButtonEl = document.getElementById("submit-initials");
        let highscoreButtonEl = document.getElementById("highscore-button");
        let highscoreContainerEl = document.getElementById("highscore-container");
        let highScores = [];
           
        if (JSON.parse(localStorage.getItem('scores')) !== null) {
            highScores = JSON.parse(localStorage.getItem("scores"));
        }
    
        function startQuiz() {
            
            landingContainerEl.setAttribute("class","container d-none");
            let rowEl = null;
            let colEl = null;
            let headerEl = null;
            let buttonEl = null;
            quizContainerEl.setAttribute("class","container");
            let currentQuestion = 1;
            let score = 0;
    
            timeRemaining=numQuestions * 15;
            timeRemainingEl.setAttribute("value",timeRemaining);
           
            let myInterval = setInterval(function() {
                if (timeRemaining<1) {
                    clearInterval(myInterval);
                   
                    quizContainerEl.setAttribute("class","container d-none");
                    finalContainerEl.setAttribute("class","container");
                    return;
                }
                timeRemaining = timeRemaining - 1;
                timeRemainingEl.setAttribute("value",timeRemaining);
            },1000);
            let clickTimeout = false;
            
        function generateQuestion(questionNum) {                
                quizContainerEl.innerHTML = "";
                rowEl = document.createElement("div");
                rowEl.setAttribute("class","row");
                quizContainerEl.append(rowEl);

                colEl = document.createElement("div");
                colEl.setAttribute("class","col-0 col-sm-2");
                rowEl.append(colEl);

                colEl = document.createElement("div");
                colEl.setAttribute("class","col-12 col-sm-8");
                rowEl.append(colEl);

                colEl = document.createElement("div");
                colEl.setAttribute("class","col-0 col-sm-2");
                rowEl.append(colEl);

                colEl = rowEl.children[1];
                rowEl = document.createElement("div");
                rowEl.setAttribute("class","row mb-3");
                colEl.append(rowEl);

                colEl = document.createElement("div");
                colEl.setAttribute("class","col-12");
                rowEl.append(colEl);

                headerEl = document.createElement("h2");
                headerEl.innerHTML = questions[questionNum-1].title;
                colEl.append(headerEl);

                colEl = quizContainerEl.children[0].children[1];
                for (let i=0; i<4; i++) {
                    let rowEl = document.createElement("div");
                    rowEl.setAttribute("class","row mb-1");
                    colEl.append(rowEl);

                    let colEl2 = document.createElement("div");
                    colEl2.setAttribute("class","col-12");
                    rowEl.append(colEl2);

                    buttonEl = document.createElement("button");
                    buttonEl.setAttribute("class","btn btn-primary");
                    buttonEl.setAttribute("type","button");
                    buttonEl.innerHTML = questions[currentQuestion-1].choices[i];
                    colEl2.append(buttonEl);
                    buttonEl.addEventListener("click",function(){
                        
                        if (clickTimeout) {
                            return;
                        }
                        clickTimeout = true;
                        clearInterval(myInterval);
                        let colEl = quizContainerEl.children[0].children[1];
                        let rowEl = document.createElement("div");
                        rowEl.setAttribute("class","row border-top");
                        colEl.append(rowEl);

                        colEl = document.createElement("div");
                        colEl.setAttribute("class","col-12");
                        rowEl.append(colEl);

                        let parEl = document.createElement("p");
                        colEl.append(parEl);
                        if (this.innerHTML === questions[currentQuestion - 1].answer) {
                            parEl.innerHTML = "Correct!";
                        } else {
                            parEl.innerHTML = "Incorrect";
                            timeRemaining = timeRemaining - 10;
                            if (timeRemaining < 0) {
                                timeRemaining = 0;
                            }
                            timeRemainingEl.setAttribute("value",timeRemaining);
                        }
                        currentQuestion++;
                        if (currentQuestion>questions.length) {
                            score = timeRemaining;
                        }
                        setTimeout(function() {
                            
                            if (currentQuestion>questions.length) {
                                
                                quizContainerEl.setAttribute("class","container d-none");
                                finalContainerEl.setAttribute("class","container");
                                finalScoreEl.setAttribute("value",score);
                            } else {
                                generateQuestion(currentQuestion);
                                clickTimeout = false;
                                myInterval = setInterval(function() {
                                    if (timeRemaining<1) {
                                        clearInterval(myInterval);
                                        quizContainerEl.setAttribute("class","container d-none");
                                        finalContainerEl.setAttribute("class","container");
                                        return;
                                    }
                                    timeRemaining = timeRemaining - 1;
                                    timeRemainingEl.setAttribute("value",timeRemaining);
                                },1000);
                            }
                        },1000);
                    });
                }
                

            }
            function saveHighScore() {
                let initialsEl = document.getElementById("initials-entry");
                let newHighScore = {
                    initials: initialsEl.value,
                    highScore: score
                };
                console.log(newHighScore);
                highScores.push(newHighScore);
                console.log(highScores);
                localStorage.setItem("scores",JSON.stringify(highScores));
            }
            submitButtonEl.addEventListener("click",saveHighScore);
            
            generateQuestion(currentQuestion);
        }

        startButtonEl.addEventListener("click",startQuiz);

        highscoreButtonEl.addEventListener("click",function() {
            landingContainerEl.setAttribute("class","container d-none");
            quizContainerEl.setAttribute("class","container d-none");
            finalContainerEl.setAttribute("class","container d-none");
            highscoreContainerEl.setAttribute("class","container");
            let colEl = document.getElementById("highscore-table");
            for (i=0; i<highScores.length; i++) {
                let rowEl = document.createElement("div");
                rowEl.setAttribute("class","row mb-1");
                colEl.append(rowEl);

                let colEl2 = document.createElement("div");
                colEl2.setAttribute("class","col-12 text-center");
                rowEl.append(colEl2);

                let parEl = document.createElement("div");
                parEl.innerHTML = "Initials: " + highScores[i].initials + "   Score: " + highScores[i].highScore;
                colEl2.append(parEl);
            }
        });
 
    }
    
initQuiz();<file_sep>/README.md
<img src="https://github.com/davidyi0529/Portfolio_D/blob/master/assets/images/logo.png?raw=true" alt="alt text" title="<NAME>">

<br />

# Speedquiz_D

<br />

- [Speedquiz_D direct page Link](https://davidyi0529.github.io/Speedquiz_D/)

<br />

Speedquiz_D is a quiz that asks the user a series of questions about HTML, CSS, & Javascript and times how long it takes to answer them all. The user is given 150 seconds to start with, and each wrong answer results in a 10-second penalty. The user's final score is equal to the number of seconds left on the clock after the final question is answered.

To start the quiz, the user clicks the "Start Quiz" button on the landing page.

### Screenshot of landing page

<img src="https://github.com/davidyi0529/Speedquiz_D/blob/master/assets/images/landing%20page.png?raw=true" width="900" height="400">

<br />
<br />

Once the quiz is started, the user is presented with a question, along with 4 possible answers. Upon clicking one of the possible answers, the app will tell the user whether their answer was correct or not, deduct 10 seconds from the remaining time if incorrect, then load the next question.

### Screenshot of quiz page

<img src="https://github.com/davidyi0529/Speedquiz_D/blob/master/assets/images/quiz%20page.png?raw=true" width="900" height="400">

<br />
<br />

Once the final question is answered, the user's final score is shown, and the user can save their score upon entering their initials. When the "Submit" button is clicked, the initials and score are saved to the local storage, so even after the browser is refreshed the score will be saved. The list of saved scores can be seen by clicking the "View Hichscores" button.

### Screenshot of final page

<img src="https://github.com/davidyi0529/Speedquiz_D/blob/master/assets/images/final%20page.png?raw=true" width="900" height="400">

<br />
<br />

### Screenshot of highscore page

<img src="https://github.com/davidyi0529/Speedquiz_D/blob/master/assets/images/high%20score.png?raw=true" width="900" height="400">

<br />
<br />

---

<br />
<br />

## Table of Contents

- [Installation](#installation)
- [Features](#features)
- [Credits](#credits)
- [Support](#support)
- [License](#license)

<br />
<br />

---

<br />
<br />

## Installation

<br />

> Below I have shared a link to clone the repo, if perhaps you would like to see or contribute to the code.

<br />

### Clone

<br />

```bash
 Clone this repo to your local machine using 'https://github.com/davidyi0529/Speedquiz_D.git'
```

<br />
<br />

---

<br />
<br />

## Features

<br />
<br />

The following were used for this project.

- `Javascript`
- `HTML`
- `Bootstrap`

<br />

Mainly Javascript was used for this project. This provided good practice in navigating the DOM in javascript, along with the use of `this` when creating a button and defining its on-click behavior to check its own text and compare to the correct answer.

A particularly fustrating problem was storing an array of objects into the local storage and then retrieving them. I was puzzled to get an error when I tried to add elements to this array saying *"myArray.push is not a function."* After doing some research I found that for arrays to behave properly you need to convert them to a string when you save them to the local storage, then convert them from a string back to an array when you retrieve them again.

<br />
<br />

---

<br />
<br />

## Credits

<br />

><a href="https://bootcamp.berkeley.edu/coding/" target="_blank">`UCB-Coding-Bootcamp`</a> 

><a href="w3schools.com" target="_blank">`W3Schools`</a> 

><a href="https://shields.io/ " target="_blank">`Shields.io`</a> 

<br />
<br />

---

<br />
<br />

## Support

<br />

Reach out to me at one of the following places!

> Linkedin @ <a href="www.linkedin.com/in/davidyi0529" target="_blank">`davidyi0529`</a> 

> Github @ <a href="https://github.com/davidyi0529" target="_blank">`davidyi0529`</a>

<br />
<br />

---

<br />
<br />

## License

![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)

 - **[MIT license](http://opensource.org/licenses/mit-license.php)**