I need help creating the results page of this quiz

JavaScript
1 
var host = "api.giphy.com";
var path = "/v1/gifs/random";
var apiKey = "**********";
var GIFset1 = [
    ["007", "thor", "transformers", "thanos"],
    ["dancing", "fire", "milk", "pinkpanther"],
    ["ballons", "pokemon", "toys", "sandwhich"],
    ["godfather", "crackers", "scary", "tall"],
    ["salt", "sun", "indianajones", "moon"],
    ["chocolate", "starwars", "spiderman", "screaming"],
    ["orange", "laughing", "screws", "freshprince"],
    ["cats", "dears", "seals", "lionking"],
    ["missionimpossible", "dogs", "apples", "octopus"],
    ["trump", "sky", "michaelmyers", "hats"]
];

var submit = ["winning","losing"];

var score = 0;

var answers = ["007", "pinkpanther", "pokemon", "godfather", "indianajones", "starwars", "freshprince", "lionking", "missionimpossible", "michaelmyers"];

var api = "https://" + host + path + "?api_key=" + apiKey + "&tag=";

var count = 0;

function gifs() {
    const gifArray = GIFset1[count];
    for (let j = 0; j < gifArray.length; j++) {
        const gifTag = gifArray[j];
        $.getJSON(api + gifTag, function (json) {
            console.log(json.data.image_url);
            if (json.data.length > 0)
                console.log(json);
            var elem = document.getElementById('q' + count);
            var img = new Image();
            img.onclick = function () {
               img.style.borderStyle="dotted";
                if (gifTag == answers[count]) {
                    score++;
                } else {
                    score--;
                }
            }
            img.src = json.data.image_url;
            img.width = "100";
            elem.appendChild(img);
        });
    }
}

gifs();
var questions = document.getElementsByClassName("question");
console.log(questions);
next.onclick = function () {
    console.log(questions[count])
    questions[count].style.display = "none";
    count++;
    questions[count].style.display = "block";
    gifs();
}

var HintButtons = document.getElementsByClassName("HintButton")
for (let i = 0; i < HintButtons.length; i++) {
    var b = HintButtons[i];
    b.onclick = function () {
        this.previousElementSibling.style.display = "block"
    }

}

EDIT
* NOTE: API key redacted
Mittineague

2

So how do you propose to find out when the user has entered answers for all of the questions?
What do you want to happen when that state is entered?

3

I don’t know how to do that either…the slides are working fine I just cannot get the scores to be printed out in the end or at all during the quiz

4 
<doctype html>
<html>

<head>

    <!--Title for page-->
    <title>Theme Song Quiz Game</title>

    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<!--Header for page-->
<h1>Theme Song Quiz Game</h1>

<!--INSTRUCTIONS-->
<div id="instuctions">
    <p> <i>To win the quiz game the user must hear multiple theme songs from iconic movies/shows and pair them with their correct GIF. The user has the option of playing back the song as many times as she or he chooses. They also have the option of increasing/decreasing the volume if needed, and can also download the song if they like it enough. After answering all the question they simply need to click submit and wait for their results. To win you need to score 6 and above, 5 and below you lose. Good luck! </i> </p>
</div>

<body>

    <div id="container">

        <div class="question" style="display:block">
            <audio controls>
           <source src="music/007-song.mp3" type="audio/mp3"> 
        </audio>
            <div class="imgs" id="q0"> </div>
            <div class="hint">
                <p class="HintText">Was the top agent of the world</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Panther-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q1"></div>
            <div class="hint">
                <p class="HintText">Was known for being a famous thief</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Pokmon-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q2"></div>
            <div class="hint">
                <p class="HintText">He had to catch them all</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Godfather-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q3"></div>
            <div class="hint">
                <p class="HintText">I'll make you an offer you can't refuse</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Indiana-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q4"></div>
            <div class="hint">
                <p class="HintText">Was the world's leading archaeologist</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Star-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q5"></div>
            <div class="hint">
                <p class="HintText">These aren't the droids you are looking for</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Fresh-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q6"></div>
            <div class="hint">
                <p class="HintText">I was playing some B ball up to know good</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Lion-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q7"></div>
            <div class="hint">
                <p class="HintText">Pretty much the chosen one</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Mission-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q8"></div>
            <div class="hint">
                <p class="HintText">Close relative to Kim Possible</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

        <div class="question">
            <audio controls><source src="music/Myers-song.mp3" type="audio/mp3"> 
            </audio>
            <div class="imgs" id="q9"></div>
            <div class="hint">
                <p class="HintText">No matter how how fast you run he'll slow walk and still catch you</p>
                <button class="HintButton">Hint</button>
            </div>
        </div>

       <button id="next"> next</button>
        <button id="fin">Submit</button>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="app.js"></script>

    </div>

And that’s the html side

5

So your code already has a reaction coded into it for when someone clicks the next button. Though, either you havent shown us the whole code, or else your code is currently failing because next is not defined…

Use the same logic to react to someone pushing the button with the id “fin”. Instead of making the next question div appear, instead make a div of class ‘results’ appear.

The contents of this div can be altered. The method of doing so will depend on how you do the previous step. So give that a try first. You’ve already got all the code you need in front of you for that step.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.