Change the following code to where it adds an image(leave the image blank, I can add...

<!DOCTYPE html>

<html lang="en" xmlns="">
<head>
<meta charset="utf-8" />
<title>World Cup Quiz</title>
</head>
<body>
<style>
#flashcards001 {
background-color: white;
border: 4px solid black;
width: 400px;
height: 400px;
border-radius: 10px;
padding: 10px;
margin: 10px;
}

.buttons001 {
background-color: blue;
color: white;
padding: 5px;
margin: 10px;
border-radius: 10px;
width: 100px;
}

.buttons002 {
background-color: lightblue;
color: black;
padding: auto;
margin: auto;
border-radius: auto;
width:auto;
}

#text001 {
text-align: center;
}

#text002 {
text-align: left;
}

#green001 {
color: green;
}

#red001 {
color: red;
}
       #img{
           alight: centerl
</style>
<div id="frame001">
<div id="text001">
<h2>World Cup Quiz</h2>
Question: <text id="number001">0</text><br />
Score: <text id="score001">0</text>
<hr />
<div id="message001">Click Begin to start</div><br />
</div>
<div id="text002">
<div id="question001"></div>
<div id="option001"></div>
<div id="option002"></div>
<div id="option003"></div>
<div id="option004"></div>
<div id="answer001"></div>
<div id="text001">
<div id="disappear001"><button class="buttons001" onclick="begin001()">Begin</button></div>
</div>
<div id="next001"></div>
</div>
</div>

<script>

var q = ["What team is this? <br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />", "What team is this?<br /><br />"];
var a1 = ["<button class=buttons002 onclick=q1c()>England</button>",
"<button class=buttons002 onclick=q2c()>Croatia</button>",
"<button class=buttons002 onclick=q3c()>Spain</button>",
"<button class=buttons002 onclick=q4i()>Netherlands</button>",
"<button class=buttons002 onclick=q5i()>Chile</button>",
"<button class=buttons002 onclick=q6i()>Autralia</button>",
"<button class=buttons002 onclick=q7i()>Cameroon</button>",
"<button class=buttons002 onclick=q8i()>Mexico</button>",
"<button class=buttons002 onclick=q9i()>Colombia</button>",
"<button class=buttons002 onclick=q10i()>Greece</button>"];

var a2 = ["<button class=buttons002 onclick=q1i()>Japan</button>",
"<button class=buttons002 onclick=q2i()>Greece</button>",
"<button class=buttons002 onclick=q3i()>Uruguay</button>",
"<button class=buttons002 onclick=q4c()>Costa Rica</button>",
"<button class=buttons002 onclick=q5c()>Italy</button>",
"<button class=buttons002 onclick=q6c()>Switzerland</button>",
"<button class=buttons002 onclick=q7i()>Ecuador</button>",
"<button class=buttons002 onclick=q8i()>France</button>",
"<button class=buttons002 onclick=q9i()>Honduras</button>",
"<button class=buttons002 onclick=q10i()>Brazil</button>"];

var a3 = ["<button class=buttons002 onclick=q1i()>Argentina</button>",
"<button class=buttons002 onclick=q2i()>Bosnia and Herzegovina</button>",
"<button class=buttons002 onclick=q3i()>Iran</button>",
"<button class=buttons002 onclick=q4i()>Nigeria</button>",
"<button class=buttons002 onclick=q5i()>Germany</button>",
"<button class=buttons002 onclick=q6i()>Ghana</button>",
"<button class=buttons002 onclick=q7c()>USA</button>",
"<button class=buttons002 onclick=q8c()>Belgium</button>",
"<button class=buttons002 onclick=q9i()>Algeria</button>",
"<button class=buttons002 onclick=q10i()>Russia</button>"];

var a4 = ["<button class=buttons002 onclick=q1i()>Kora Republic</button>",
"<button class=buttons002 onclick=q2i()>Poland</button>",
"<button class=buttons002 onclick=q3i()>Egypt</button>",
"<button class=buttons002 onclick=q4i()>Iceland</button>",
"<button class=buttons002 onclick=q5i()>Serbia</button>",
"<button class=buttons002 onclick=q6i()>Portugal</button>",
"<button class=buttons002 onclick=q7i()>Panama</button>",
"<button class=buttons002 onclick=q8i()>Morocco</button>",
"<button class=buttons002 onclick=q9c()>Tunisia</button>",
"<button class=buttons002 onclick=q10c()>Peru</button>"];

var c = ["Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct", "Correct"];
var i = ["Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect", "Incorrect"];

var n = 0;
n++;
var s = 0;
s++;

function begin001() {
disappear001.innerHTML = "";
message001.innerHTML = "";
question001.innerHTML = q[0];
option001.innerHTML = a1[0];
option002.innerHTML = a2[0];
option003.innerHTML = a3[0];
option004.innerHTML = a4[0];
number001.innerHTML = n++;
}

function q1c() {
answer001.innerHTML = "<div id=green001>" + c[0] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=new002()>Next</button>";
score001.innerHTML = s++;
}

function q1i() {
answer001.innerHTML = "<div id=red001>" + i[0] + "</div>";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<button class=buttons001 onclick=new002()>Next</button>";
}

function end001() {
message001.innerHTML = "End of Quiz.";
question001.innerHTML = "";
option001.innerHTML = "";
option002.innerHTML = "";
option003.innerHTML = "";
option004.innerHTML = "";
next001.innerHTML = "<div id=text001>" + "<button class=buttons001 onclick=repeat001()>Repeat</button>" + "</div>";
answer001.innerHTML = "";
}

function repeat001() {
location.reload();
}
</script>
</body>
</html>

Solutions

Expert Solution

<html>
<head lang="en">
<meta charset="UTF-8">
<title> Quiz by Nikhil </title>
<style>


body {
background-color: #eeeeee;
}

.grid {
width: 600px;
height: 500px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border-radius: 50px;
border: 2px solid #cbcbcb;
box-shadow: 10px 15px 5px #cbcbcb;
}

.grid h1 {
font-family: "sans-serif";
background-color: #2c0747;
font-size: 60px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
border-radius: 50px;
}

#score {
color: #5A6772;
text-align: center;
font-size: 30px;
}


.grid #question {
font-family: "monospace";
font-size: 30px;
color: #5A6772;
}


.buttons {
margin-top: 30px;
}

#bt0, #bt1, #bt2, #bt3 {
background-color: #510b84;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #1D3C6A;
border-radius: 50px;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}

#bt0:hover, #bt1:hover, #bt2:hover, #bt3:hover {
cursor: pointer;
background-color: #2c0747; 
}   

#bt0: focus, #bt1: focus, #bt2: focus, #bt3: focus {
outline: 0;
}

#progress {
color: #2b2b2b;
font-size: 18px;
}


 


























</style>
</head>
<body>
<div class="grid">
<div id="quiz">
<h1> QUIZ </h1>
<hr style="margin-bottom: 20px">
<p id="question"> </p>

<div class="button">
<button id="bt0"> <span id="choice0"> </span> </button>
<button id="bt1"> <span id="choice1"> </span> </button>
<button id="bt2"> <span id="choice2"> </span> </button>
<button id="bt3"> <span id="choice3"> </span> </button>

</div>

<hr style="margin-top: 50px">

<footer>
<p id="progress"> Question x of y</p>
</footer>
</div>
</div>

<script>

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("bt" + 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 scores: " + quiz.score + "</h2>";
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
};

// create questions
var questions = [
    new Question("What is the Capital of India?", ["New Delhi", "Mumbai","Jaipur", "Kolkata"], "New Delhi"),

    new Question("National Animal of India?", ["Elephant", "Bengal Tiger","Lion", "Cow"], "Bengal Tiger"),
    

    new Question("National River of India?", ["Yamuna", "Ganga","Brahmputra", "Sindhu"], "Ganga"),
    

    new Question("Currency of India?", ["Dollar", "Rupee","Euro", "Pound"], "Rupee"),
        

];


var quiz = new Quiz(questions);


populate();


























 </script>
<script> 

function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
    return this.answer === choice;
}










</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;
}
</script>






</body>



</html>

venereology answered 1 week ago

Next > < Previous

Related Solutions

Change the following code to where it adds an image(leave the image blank, I can add...

Change the following code to where it adds an image(leave the image blank, I can add the image) to the question and to generate the questions and answers in a different order each time you begin the quiz. <!DOCTYPE html> <html lang="en" xmlns=""> <head> <meta charset="utf-8" /> <title>World Cup Quiz</title> </head> <body> <style> #flashcards001 { background-color: white; border: 4px solid black; width: 400px; height: 400px; border-radius: 10px; padding: 10px; margin: 10px; } .buttons001 { background-color: blue; color: white; padding: 5px;...

This is a code for a bouncing ball on an 8X8 LED. How can i change...

This is a code for a bouncing ball on an 8X8 LED. How can i change the code to make it a ping pong game against AI by adding 1 potentionmeter to control it? #include <TimerOne.h>//this is a library that uses timer 1 of the arduino to trigger interrupts in certain time intervals //This defines a matrix defining a smiley face for the 8x8 LED matrix display #define BALL { \ {1, 0, 0, 0, 0, 0, 0, 0}, \...

Solve the following problem with Excel Solver: (Leave no cells blank - be certain to enter...

Solve the following problem with Excel Solver: (Leave no cells blank - be certain to enter "0" wherever required. Do not round intermediate calculations. Round your answers to 2 decimal places.) Maximize Z = 8X + 17Y. 8X + 14Y ≤ 143 Resource A 1X + 2Y ≤ 75 Resource B 3Y ≤ 12 Resource C Decision for X Decision for Y Total profit $ Resources Used Resource A Resource B Resource C...

What would I add to the following code to detect the pitch of the audio signal?...

What would I add to the following code to detect the pitch of the audio signal? (use cepstral method) clear all; close all; clc; info = audiodevinfo; info.input(1) info.input(2) pause(3); % delete it if necessary clc; fs = 44.1e3; noBits = 16; noChannels = 1; recordObject = audiorecorder(fs,noBits,noChannels); disp('Start speaking...'); record(recordObject); pause(3); stop(recordObject); disp('End of Recording.'); x = getaudiodata(recordObject); %takin in as aperiodic signal noSamples = length(x); %length of vector x "max(size(x)) time = [1:noSamples]/fs; %time ticks %DFT: X[k]= (sigma...

code in python I want to make a function that adds all the multipliers together. The...

code in python I want to make a function that adds all the multipliers together. The code is posted below and please look at wanted output section to see what I want the code to output. The last line of the code is the only addition I need. Thanks. Code: initial=int(input("Initial value : ")) #taking inputs multiplier=float(input("Multiplier : ")) compound=int(input("No of compounds : ")) print("Your values are:") mult=initial #initalizing to find answer for i in range(0,compound): #multiplying by multiplier ...

I need the code in python where I can encrypt and decrypt any plaintext. For example,...

I need the code in python where I can encrypt and decrypt any plaintext. For example, the plaintext "hello" from each of these Block Cipher modes of Operation. Electronic Code Block Mode (ECB) Cipher block Mode (CBC) Cipher Feedback Mode (CFB) Output feedback Mode (OFB) Counter Mode (CTR) Here is an example, Affine cipher expressed in C. Encryption: char cipher(unsigned char block, char key) { return (key+11*block) } Decryption: char invcipher(unsigned char block, char key) { return (163*(block-key+256)) }

JAVA- How do I edit the following code as minimally as possible to add this method...

JAVA- How do I edit the following code as minimally as possible to add this method for calculating BMI? BMI Method: public static double calculateBMI(int height, int weight) { double BMI = (((double) weight) * 0.453592d) / ((((double) height) * 0.0254) * (((double) height) * 0.0254)); Format f = new DecimalFormat("##.######"); return (f.format(BMI)); } Code: import java.text.DecimalFormat; import java.util.Scanner; public class test2 { public static void main(String[] args) { DecimalFormat f = new DecimalFormat("##.0"); Scanner reader = new Scanner(System.in); System.out.printf("%10s...

Leave code as is ALL I NEED IS TO MAKE THE LIST INTO ASCENDING ORDER FROM...

Leave code as is ALL I NEED IS TO MAKE THE LIST INTO ASCENDING ORDER FROM A TO Z OF ARTISTS NAMES YOU CAN USE THIS AS REFERENCE SPOTIFY LIST TOP 50 AS REFERENCE FOR CSV FILE https://spotifycharts.com/viral/ import java.io.*; public class Spotify { public static void main(String[]args) { // Read csv Spotify file located on my desktop // Download csv file, save on desktop, and add file location in csvFile = " " String csvFile = "CSVFILE LOCATION OF...

I need to add this checkpoint to an existing code that i have in python Checkpoint...

I need to add this checkpoint to an existing code that i have in python Checkpoint 1: Once you have created and tested the Bank Account Class create subclasses to the BankAccount class. There should be two subclasses, CheckingAccount and SavingsAccount. You should add interest_rate to the parent BankAccount class. To the CheckingAccount add variables called per_check_fee default to false and allow_overdraft default to True. To SavingsAccount add the variable transactions_per_month, default it to 5. Create instances of CheckingAccount and...

Here is what I have so far. I have created a code where a user can...

Here is what I have so far. I have created a code where a user can enter in their information and when they click submit all of the information is shown. How can I add a required field for the phone number without using an alert? <!Doctype html> <html> <head> <meta charset="UTF-8"> <title>Login and Registeration Form Design</title> <link rel="stylesheet" type="text/css" href="signin.css"> <script> function myFunction(){ document.getElementById('demo').innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value + " " + document.getElementById('street').value + " "...

Subjects