I am having trouble adding images links to the questions. I'm not going to use the questions in the code. There will be 20 questions that are "What Star Wars Character is this?" so the user will have to guess the character based on the image. Where exactly would I put the image link and what other code will I have to add? Thank you very much!
var questionCounter = 0;
var quiz = [
{
"question": "What Star Wars character is this?",
"choices": ["Emperor Palpatine", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Emperor Palpatine"
},
{
"question": "What Star Wars character is this?",
"choices": ["Yoda", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Yoda"
},
{
"question": "What Star Wars character is this?",
"choices": ["Han Solo", "Commander Cody", "R2-D2", "Boba Fett"],
"correct": "Han Solo"
},
{
"question": "What Star Wars character is this?",
"choices": ["Darth Maul", "General Grievous", "Count Dooku", "Darth Vader"],
"correct": "Darth Maul"
},
{
"question": "What Star Wars character is this?",
"choices": ["Obi-Wan Kenobi", "Princess Leia", "Chewbacca", "Jar Jar Binks"],
"correct": "Obi-Wan Kenobi"
},
{
"question": "What Star Wars character is this?",
"choices": ["General Grievous", "Plo Koon", "Nute Gunray", "Darth Plagueis"],
"correct": "General Grievous"
},
{
"question": "What Star Wars character is this?",
"choices": ["Darth Vader", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Darth Vader"
},
{
"question": "What Star Wars character is this?",
"choices": ["Darth Plagueis", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Darth Plagueis"
},
{
"question": "What Star Wars character is this?",
"choices": ["Count Dooku", "General Grievous", "Darth Maul", "Han Solo"],
"correct": "Count Dooku"
},
{
"question": "What Star Wars character is this?",
"choices": ["C-3PO", "Yoda", "Darth Vader", "Han Solo"],
"correct": "C-3PO"
},
{
"question": "What Star Wars character is this?",
"choices": ["R2-D2", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "R2-D2"
},
{
"question": "What Star Wars character is this?",
"choices": ["Commander Cody", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Commander Cody"
},
{
"question": "What Star Wars character is this?",
"choices": ["Boba Fett", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Boba Fett"
},
{
"question": "What Star Wars character is this?",
"choices": ["Luke Skywalker", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Luke Skywalker"
},
{
"question": "What Star Wars character is this?",
"choices": ["Princess Leia", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Princess Leia"
},
{
"question": "What Star Wars character is this?",
"choices": ["Chewbacca", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Chewbacca"
},
{
"question": "What Star Wars character is this?",
"choices": ["Jar Jar Binks", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Jar Jar Binks"
},
{
"question": "What Star Wars character is this?",
"choices": ["Kit Fisto", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Kit Fisto"
},
{
"question": "What Star Wars character is this?",
"choices": ["Plo Koon", "General Grievous", "Darth Maul", "Count Dooku"],
"correct": "Internet"
},
{
"question": "What Star Wars character is this?",
"choices": ["Nute Gunray", "Yoda", "Darth Vader", "Han Solo"],
"correct": "Nute Gunray"
}
];
var currentQuestion = Math.floor(Math.random() * quiz.length);
quiz.forEach(q => q.choices.sort(() => Math.random() - .5));
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");
score = 0,
askingQuestion = true;
function $(id) { return document.getElementById(id);
}
function askQuestion() {
questionCounter++;
var choices = quiz[currentQuestion].choices,
choicesHtml = "";
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
"' id='choice" + (i + 1) +
"' value='" + choices[i] + "'>" +
" <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
}
questionContainer.textContent = "Q" + (questionCounter) + ". " +
quiz[currentQuestion].question;
choicesContainer.innerHTML = choicesHtml;
if (questionCounter === 1) {
scoreContainer.textContent = "Score: 0 right answers out of " +
quiz.length + " possible.";
submitBtn.textContent = "Submit Answer";
}
}
function checkAnswer() {
if (askingQuestion) {
submitBtn.textContent = "Next Question";
askingQuestion = false;
var userpick,
correctIndex,
radios = document.getElementsByName("quiz" + currentQuestion);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
userpick = radios[i].value;
}
if (radios[i].value == quiz[currentQuestion].correct) {
correctIndex = i;
}
}
var labelStyle = document.getElementsByTagName("label")[correctIndex].style;
labelStyle.fontWeight = "bold";
if (userpick == quiz[currentQuestion].correct) {
score++;
labelStyle.color = "green";
} else {
labelStyle.color = "red";
}
scoreContainer.textContent = "Score: " + score + " right answers out of " +
quiz.length + " possible.";
} else {
askingQuestion = true;
submitBtn.textContent = "Submit Answer";
if (currentQuestion < quiz.length - 1) {
currentQuestion++;
askQuestion();
} else {
showFinalResults();
}
}
}
function showFinalResults() {
content.innerHTML = "<h2>Quiz Completed.</h2>" +
"<h2>Below are your results:</h2>" +
"<h2>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h2>";
}
window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);
