hi maam
i am still having problem in implementing functionality in score board
@Hiral_Khakhariya
@drishtinayak2828-TA Preformatted text
1 Like
type or paste code here
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz page</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<style>
#main_sec{
border: 1px solid black;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 60%;
margin: auto;
background-color: #54C3EF;
}
#main_sec h1{
font-family: 'Permanent Marker', cursive;
color: #E8C947;
font-size: 40px;
margin: 0px;
}
.box1_style{
background-color: #2B3252;
width: 60%;
}
.data1_style{
border-bottom: 1px solid #E8C947;
color: #E8C947;
padding: 20px;
font-size: medium;
margin: 10px;
}
.bttn_style{
background-color: #E8C947;
color: black;
padding: 5px 10px;
border-radius: 5px;
border: none;
margin-left: 45%;
margin-bottom: 10px;
cursor: pointer;
box-shadow: 0px 0px 2px 2px grey;
}
.board_style{
border: 1px solid red;
position: absolute;
font-size: 30px;
right: 80px;
top: 98px;
background-color: white;
color: black;
padding: 50px;
height: 70px;
width: 30px;
}
</style>
</head>
<body>
<section id="main_sec">
<img src="load-1110_256.gif" id="loader">
<h1>the quiz app</h1>
</section>
<script>
var pruduct_load = () => {
var a = new XMLHttpRequest();
a.open("GET", "https://5d76bf96515d1a0014085cf9.mockapi.io/quiz", true);
a.send();
a.onreadystatechange = function () {
// console.log(this.readyState)
// console.log(this.status)
if (this.status == 200 && this.readyState == 4) {
document.getElementById('loader').style.display = "none"
//console.log(this.responseText)
var main_data = JSON.parse(this.responseText)
//console.log(main_data)
var score = 0
var score_board = document.createElement('div')
score_board.innerText = 'score: '+ score+'/5'
score_board.className = 'board_style'
var c = 0
for (var obj of main_data) {
//var name_count = 0
// console.log(main_data[obj])
for (var i in obj) {
var box_div = document.createElement('div')
box_div.className = "box1_style"
//console.log(x)
if (i == "id") {
var para_tag = document.createElement('p')
para_tag.className = "data1_style"
para_tag.innerText += 'Q' + obj[i] + '. '
}
else if (i == "question") {
para_tag.innerHTML += obj[i] + "<br>"
//console.log(para_tag)
}
else if(i == "answer"){
var ans = obj[i]
}
else if (i == "options") {
c = c + 1
for (var y of obj[i]) {
var inp_tag = document.createElement('input')
inp_tag.className = "inp_tag_style"
inp_tag.type = "radio"
inp_tag.name = "name" + c
inp_tag.value = y;
para_tag.appendChild(inp_tag)
inp_tag.innerHTML += y;
para_tag.innerHTML += y+ "<br>";
}
}
}
box_div.appendChild(para_tag)
document.getElementById('main_sec').appendChild(box_div)
box_div.appendChild(bttn)
bttn.setAttribute("onclick","fun1()")
document.getElementById('main_sec').appendChild(score_board)
}
}
}
}
pruduct_load()
var bttn = document.createElement('button')
bttn.innerText = "submit"
bttn.className = "bttn_style"
</script>
</body>
</html>
1 Like
Hi,
Based on the provided code:-
First initialize the score variable outside the pruduct_load function to keep track of the score:-
var score = 0;
2-Create a function to handle the submission of the quiz and calculate the score:-
function submitQuiz() {
// Get all the radio buttons
var radioButtons = document.querySelectorAll(âinput[type=âradioâ]:checkedâ);
// Loop through the selected answers and compare them with the correct answers
for (var i = 0; i < radioButtons.length; i++) {
var selectedAnswer = radioButtons[i].value;
// Compare the selected answer with the correct answer
if (selectedAnswer === main_data[i].answer) {
score++;
}
}
// Update the scoreboard with the calculated score
score_board.innerText = 'score: â + score + â/5â;
}
3- Attach the submitQuiz function to the buttonâs onclick event:-
bttn.setAttribute(âonclickâ, âsubmitQuiz()â);
4-Full code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>quiz page</title>
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<style> /* CSS styles here */ </style>
</head>
<body>
<section id="main_sec"> <img src="load-1110_256.gif" id="loader"> <h1>the quiz app</h1> </section>
<script>
var score = 0;
function submitQuiz() {
var radioButtons = document.querySelectorAll('input[type="radio"]:checked');
for (var i = 0; i < radioButtons.length; i++) {
var selectedAnswer = radioButtons[i].value;
if (selectedAnswer === main_data[i].answer) {
score++;
}
}
score_board.innerText = 'score: ' + score + '/5';
}
var pruduct_load = () => {
var a = new XMLHttpRequest();
a.open("GET", "https://5d76bf96515d1a0014085cf9.mockapi.io/quiz", true);
a.send();
a.onreadystatechange = function () {
if (this.status == 200 && this.readyState == 4) {
document.getElementById('loader').style.display = "none"
var main_data = JSON.parse(this.responseText)
var score_board = document.createElement('div')
score_board.innerText = 'score: ' + score + '/5'
score_board.className = 'board_style'
var c = 0;
for (var obj of main_data) {
for (var i in obj) {
var box_div = document.createElement('div')
box_div.className = "box1_style"
if (i == "id") {
var para_tag = document.createElement('p')
para_tag.className = "data1_style"
para_tag.innerText += 'Q' + obj[i] + '. '
}
else if (i == "question") {
para_tag.innerHTML += obj[i] + "<br>"
}
else if(i == "answer"){
var ans = obj[i]
}
else if (i == "options") {
c = c + 1
for (var y of obj[i]) {
var inp_tag = document.createElement('input')
inp_tag.className = "inp_tag_style"
inp_tag.type = "radio"
inp_tag.name = "name" + c
inp_tag.value = y;
para_tag.appendChild(inp_tag)
inp_tag.innerHTML += y;
para_tag.innerHTML += y+ "<br>";
}
}
box_div.appendChild(para_tag)
document.getElementById('main_sec').appendChild(box_div)
box_div.appendChild(bttn)
bttn.setAttribute("onclick", "submitQuiz()")
document.getElementById('main_sec').appendChild(score_board)
}
}
}
}
}
pruduct_load()
var bttn = document.createElement('button')
bttn.innerText = "submit"
bttn.className = "bttn_style"
</script>
</body>
</html>
Please note that I made some assumptions regarding the structure of the API response and the placement of the elements. Make sure to adjust the code accordingly based on your specific requirements. Hope this make you understand in a better way !!