I am trying to creat a html/css/javascript page that looks like this.... I am almost done but I need help debugging. I have an issue where it plays in a slide kind of and I need all the questions to be on the same page. Also, the final results are supposed to be on the right-hand side after the questions. So I cant figure out how to fix that. Also I can get the name to print with the score data at the end so I need help with that also. If you could help me fix that would be great!!! My current end result is supposed to look exactly like that picture above so if you could help me fix the final few things that would help me a lot. Quiz First Name: Last Name: HTML BASICS Quiz Answer Answer Answer Answer Submit CSS body { background-color: #F2D2BD; } JavaScript const quizData = [ { question: "Question 1: Select the tag used to display an image on a web page", a: "< a href>", b: "", c: "", d: "", correct: "b", }, { question: "Question 2: Choose the attribute used to provide accessbility by configuring a text alteration that is available to browsers and other user agents that do not support graphics", a: "alt", b: "txt", c: "src", d: "none of the above", correct: "a", }, { question: "Question 3: Use the ____________ property to resize or scale the4 background image.", a: "background-image", b: "background-clip", c: "background-ongin", d: "background-size", correct: "d", }, { question: "Question 4: Choose the item below that describes the process of creating an image with the lowest file size that still renders a good quality image", a: "validation", b: "multimedia", c: "optimization", d: "bandwidth", correct: "b", }, ]; const quiz = document.getElementById('quiz') const answerEls = document.querySelectorAll('.answer') const questionEl = document.getElementById('question') const optiona = document.getElementById('optiona') const optionb = document.getElementById('optionb') const optionc = document.getElementById('optionc') const optiond = document.getElementById('optiond') const submitBtn = document.getElementById('submit') let currentQuiz = 0 let score = 0 loadQuiz() function loadQuiz() { deselectAnswers() const currentQuizData = quizData[currentQuiz] questionEl.innerText = currentQuizData.question optiona.innerText = currentQuizData.a optionb.innerText = currentQuizData.b optionc.innerText = currentQuizData.c optiond.innerText = currentQuizData.d } function deselectAnswers() { answerEls.forEach(answerEl => answerEl.checked = false) } function getSelected() { let answer answerEls.forEach(answerEl => { if (answerEl.checked) { answer = answerEl.id } }) return answer } submitBtn.addEventListener('click', () => { const answer = getSelected() if (answer) { if (answer === quizData[currentQuiz].correct) { score++ } currentQuiz++ if (currentQuiz < quizData.length) { loadQuiz() } else { quiz.innerHTML = ` You answered ${score}/${quizData.length} questions correct: ${(score / quizData.length) * 100}% ` } } })
I am trying to creat a html/css/javascript page that looks like this....
I am almost done but I need help debugging. I have an issue where it plays in a slide kind of and I need all the questions to be on the same page. Also, the final results are supposed to be on the right-hand side after the questions. So I cant figure out how to fix that. Also I can get the name to print with the score data at the end so I need help with that also.
If you could help me fix that would be great!!!
My current end result is supposed to look exactly like that picture above so if you could help me fix the final few things that would help me a lot.
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="s2.css">
</head>
<body>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">First Name:</label>
<input type="text" class="form-control" id="fname">
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="lname">
</div>
<input type="text" placeholder="Enter your Last name:" id="ln" required /><br><br>
<div style="background-color: #967969;"><h3>HTML BASICS</h3></div>
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Quiz</h2>
<ul>
<li>
<input type="radio" name="answer" id="a" class="answer">
<label for="a" id="optiona">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="b" class="answer">
<label for="b" id="optionb">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="c" class="answer">
<label for="c" id="optionc">Answer</label>
</li>
<li>
<input type="radio" name="answer" id="d" class="answer">
<label for="d" id="optiond">Answer</label>
</li>
</ul>
</div>
<button id="submit" style="background-color: #967969;">Submit</button>
<script src="quiz.js"></script>
<script src="quiz2.js"></script>
</div>
</body>
</html>
CSS
body {
background-color: #F2D2BD;
}
JavaScript
const quizData = [
{
question: "Question 1: Select the tag used to display an image on a web page",
a: "< a href>",
b: "<img>",
c: "<image>",
d: "<graphic>",
correct: "b",
},
{
question: "Question 2: Choose the attribute used to provide accessbility by configuring a text alteration that is available to browsers and other user agents that do not support graphics",
a: "alt",
b: "txt",
c: "src",
d: "none of the above",
correct: "a",
},
{
question: "Question 3: Use the ____________ property to resize or scale the4 background image.",
a: "background-image",
b: "background-clip",
c: "background-ongin",
d: "background-size",
correct: "d",
},
{
question: "Question 4: Choose the item below that describes the process of creating an image with the lowest file size that still renders a good quality image",
a: "validation",
b: "multimedia",
c: "optimization",
d: "bandwidth",
correct: "b",
},
];
const quiz = document.getElementById('quiz')
const answerEls = document.querySelectorAll('.answer')
const questionEl = document.getElementById('question')
const optiona = document.getElementById('optiona')
const optionb = document.getElementById('optionb')
const optionc = document.getElementById('optionc')
const optiond = document.getElementById('optiond')
const submitBtn = document.getElementById('submit')
let currentQuiz = 0
let score = 0
loadQuiz()
function loadQuiz() {
deselectAnswers()
const currentQuizData = quizData[currentQuiz]
questionEl.innerText = currentQuizData.question
optiona.innerText = currentQuizData.a
optionb.innerText = currentQuizData.b
optionc.innerText = currentQuizData.c
optiond.innerText = currentQuizData.d
}
function deselectAnswers() {
answerEls.forEach(answerEl => answerEl.checked = false)
}
function getSelected() {
let answer
answerEls.forEach(answerEl => {
if (answerEl.checked) {
answer = answerEl.id
}
})
return answer
}
submitBtn.addEventListener('click', () => {
const answer = getSelected()
if (answer) {
if (answer === quizData[currentQuiz].correct) {
score++
}
currentQuiz++
if (currentQuiz < quizData.length) {
loadQuiz()
} else {
quiz.innerHTML = `
<h2>You answered ${score}/${quizData.length} questions correct: ${(score / quizData.length) * 100}% </h2>`
}
}
})
Step by step
Solved in 4 steps with 4 images
