Question

In: Computer Science

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. I have 10 questions but due to chegg not allowing me to post all of my code I shorted it to one question.

<!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 8 months 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;...
Change or edit the following code so that it has 20 questions, there's an image for...
Change or edit the following code so that it has 20 questions, there's an image for each question and once the user enters an incorrect answer, there's a button that the user can click on that displays the correct answer. The questions and answer choices should also be random each time you start the quiz. <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>World Cup Quiz</title> </head> <body> <style> #flashcards001 { background-color: white; border: 4px solid black; width: 400px;...
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)) }
Change the format of the given code to two columns, add a sub title and an...
Change the format of the given code to two columns, add a sub title and an author name and increase the color and thickness of the column-rule. Add an image and float the text around the image. <!DOCTYPE html> <!-- Fig. 5.17: multicolumns.html --> <!-- Multicolumn text in CSS3. --> <html> <head> <meta charset = "utf-8"› <title>Multicolumns</title> <style type = "text/css"› p { margin:0.9em Oem; } .multicolumns { /* setting the number of columns to 3 */ -webkit-column-count: 3; -moz-column-count:...
Can you add more comments explaining what this code does? i commented what I know so...
Can you add more comments explaining what this code does? i commented what I know so far #include<stdio.h> #include<pthread.h> #include<semaphore.h> #include<unistd.h> sem_t mutex,writeblock; int data = 0,rcount = 0; int sleepLength = 2; // used to represent work void *reader(void *arg) { int f; f = ((int)arg); sem_wait(&mutex); // decrement by 1 if rcount = rcount + 1; if(rcount==1) sem_wait(&writeblock); sem_post(&mutex); printf("Data read by the reader%d is %d\n",f,data); //shows current reader and data sleep(sleepLength); // 1 second of "work" is...
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT