Javascript 测验应用程序下一个问题功能和清除单选按钮值功能不工作
我正在构建一个测验应用程序。我在问一个新问题功能时遇到了问题，还清除了以前问题的无线基站输入，以便下一个问题将有取消选中的单选按钮。 为了清除单选按钮输入，我创建了clearRadioBtnValues（）函数，但它没有按预期工作。我面临的问题有时是无线电btn值未被清除，有时在给出正确/不正确的ans后，下一个问题未显示，有时我的应用程序卡在与正确/不正确的ans相关的警报MSG上，有时我的上一个问题的ans正在继续下一个问题。有人能告诉我我做错了什么吗 我的HTML代码--- 我的JS代码---Javascript 测验应用程序下一个问题功能和清除单选按钮值功能不工作,javascript,html,css,radio-button,Javascript,Html,Css,Radio Button,我正在构建一个测验应用程序。我在问一个新问题功能时遇到了问题，还清除了以前问题的无线基站输入，以便下一个问题将有取消选中的单选按钮。 为了清除单选按钮输入，我创建了clearRadioBtnValues（）函数，但它没有按预期工作。我面临的问题有时是无线电btn值未被清除，有时在给出正确/不正确的ans后，下一个问题未显示，有时我的应用程序卡在与正确/不正确的ans相关的警报MSG上，有时我的上一个问题的ans正在继续下一个问题。有人能告诉我我做错了什么吗 我的HTML代码--- 我的JS代码-
const quizData=[
{
问题：“你多大了？”，
答:"十",，
b:‘20’，
c:‘23’，
d:‘50’，
更正：'c'，
计数：0
},
{
问题：“WWW代表什么？”，
答：“万维网”，
b:“万维网世界”，
c:“万维网”，
d:‘以上都没有’，
校正者：“a”，
计数：0
},
{
问题：“印度的成人年龄？”，
a:‘二十’，
b:‘18’，
c:‘17’，
d:‘50’，
校正者：'b'，
计数：0
},
{
问题:"印度首都",，
答：“博帕尔”，
b:‘孟买’，
c:‘加尔各答’，
d:‘新德里’，
校正者：'d'，
计数：0
},
{
问题:"议员之都",，
答：“博帕尔”，
b:“布尔汉普”，
c:“印多尔”，
d:“古纳”，
校正者：“a”，
计数：0
}
]
const question=document.getElementById（'question'）
const optionA=document.getElementById（'a_text'）
const optionB=document.getElementById（'b_text'））
const optionC=document.getElementById（'c_text'））
const optionD=document.getElementById（'d_text'））
const input=document.querySelectorAll（'input'））
const btnSubmit=document.getElementById（'submit'）
const radioBtnValue=document.getElementsByName（'answer'）
let指数；
函数getRandomQuestion（）{
返回值（Math.floor（Math.random（）*quizData.length））
}
函数radioBtn（）{
let元素；
//const radioBtnValue=document.getElementsByName（'answer'）
//console.log（radioBtnValue）
radioBtnValue.forEach（（el）=>{
//控制台日志（el.checked）
如果（标高已勾选）{
//控制台日志（el）
元素=el.id
}
否则{
返回；
}
})
//console.log（元素）
返回元素
}
函数clearRadioBtnValues（）{
console.log（'内部clearradioBtn'）
radioBtnValue.forEach（（el）=>{
el.checked='false'
})
返回
}
函数检查（值、quizData、索引）{
console.log（值）
//console.log（quizData）
console.log（索引）
如果（值===quizData[index].correctAns）{
警报（'correct ans'）
clearRadioBtnValues（）
startQuiz（）
}
else if（值===未定义）{
警报（'至少选择一个选项'）
}
否则{
警报（“错误的ans”）
clearRadioBtnValues（）
startQuiz（）
//startQuiz（）
}
//if（el.id==quizData[index].correctAns）{
//控制台日志（el）
//警报（'correct ans'）
//返回
// }
//否则{
//警报（“错误的ans”）
//返回；
// }
}
函数startQuiz（）{
//调试器
//getRandomQuestion（）
//console.log（'insidestartquiz'）
//console.log（radioBtnValue）
index=getRandomQuestion（）
//console.log（索引）
if（quizData[index].count{
//支票（el、quizData、索引）
////如果（el.checked&&el.id==quizData[index].correctAns）{
////console.log（el）
////警报（'correct ans'）
////中断；
// // }
////否则{
////警报（'不正确的ans'）
////返回；
// // }
})
}
否则{
index=getRandomQuestion（）
console.log（'inside-else'，index）
}
console.log（quizData）
}
window.onload=startQuiz
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="quiz-container" id="quiz">
<div class="quiz-header">
<h2 id="question">Question text</h2>
<ul id="main-ul">
<li>
<input
type="radio"
id="a"
name="answer"
class="answer"
/>
<label id="a_text" for="a"></label>
</li>
<li>
<input
type="radio"
id="b"
name="answer"
class="answer"
/>
<label id="b_text" for="b"></label>
</li>
<li>
<input
type="radio"
id="c"
name="answer"
class="answer"
/>
<label id="c_text" for="c"></label>
</li>
<li>
<input
type="radio"
id="d"
name="answer"
class="answer"
/>
<label id="d_text" for="d"></label>
</li>
</ul>
</div>
<button id="submit">Submit</button>
</div>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins", sans-serif;
margin: 0;
min-height: 100vh;
}
.quiz-container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
overflow: hidden;
width: 600px;
max-width: 100%;
}
.quiz-header {
padding: 4rem;
}
h2 {
padding: 1rem;
text-align: center;
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
font-size: 1.2rem;
margin: 1rem 0;
}
ul li label {
cursor: pointer;
}
button {
background-color: #8e44ad;
border: none;
color: white;
cursor: pointer;
display: block;
font-family: inherit;
font-size: 1.1rem;
width: 100%;
padding: 1.3rem;
}
button:hover {
background-color: #732d91;
}
button:focus {
background-color: #5e3370;
outline: none;
}
const quizData=[
{
question:'How old are you?',
a:'10',
b:'20',
c:'23',
d:'50',
correctAns:'c',
count:0
},
{
question:'WWW stands for?',
a:'World Wide Web',
b:'Web Wide World',
c:'Worldy Wide web',
d:'none of the above',
correctAns:'a',
count:0
},
{
question:'Adult age in india?',
a:'20',
b:'18',
c:'17',
d:'50',
correctAns:'b',
count:0
},
{
question:'Capital of India?',
a:'Bhopal',
b:'Mumbai',
c:'Kolkata',
d:'New Delhi',
correctAns:'d',
count:0
},
{
question:'Capital of MP?',
a:'Bhopal',
b:'Burhanpur',
c:'Indore',
d:'Guna',
correctAns:'a',
count:0
}
]
const question=document.getElementById('question')
const optionA=document.getElementById('a_text')
const optionB=document.getElementById('b_text')
const optionC=document.getElementById('c_text')
const optionD=document.getElementById('d_text')
const input=document.querySelectorAll('input')
const btnSubmit=document.getElementById('submit')
const radioBtnValue=document.getElementsByName('answer')
let index;
function getRandomQuestion(){
return(Math.floor(Math.random()*quizData.length))
}
function radioBtn(){
let element;
//const radioBtnValue=document.getElementsByName('answer')
//console.log(radioBtnValue)
radioBtnValue.forEach((el)=>{
//console.log(el.checked)
if(el.checked){
// console.log(el)
element=el.id
}
else{
return ;
}
})
//console.log(element)
return element
}
function clearRadioBtnValues(){
console.log('inside clearradioBtn')
radioBtnValue.forEach((el)=>{
el.checked='false'
})
return
}
function checkAns(value,quizData,index){
console.log(value)
// console.log(quizData)
console.log(index)
if(value===quizData[index].correctAns){
alert('correct ans')
clearRadioBtnValues()
startQuiz()
}
else if(value===undefined){
alert('choose atleast one option')
}
else{
alert('incorrect ans')
clearRadioBtnValues()
startQuiz()
//startQuiz()
}
// if(el.id===quizData[index].correctAns){
// console.log(el)
// alert('correct ans')
// return
// }
// else{
// alert('incorrect ans')
// return;
// }
}
function startQuiz(){
//debugger
//getRandomQuestion()
// console.log('inside startQuiz')
//console.log(radioBtnValue)
index=getRandomQuestion()
//console.log(index)
if(quizData[index].count<1)
{
question.innerHTML=quizData[index].question
//console.log(optionA)
optionA.innerHTML=quizData[index].a
optionB.innerHTML=quizData[index].b
optionC.innerHTML=quizData[index].c
optionD.innerHTML=quizData[index].d
quizData[index].count++
btnSubmit.addEventListener('click',function(){
let radioBtnValue= radioBtn()
//console.log(radioBtnValue)
checkAns(radioBtnValue,quizData,index)
// let radioBtnValue=document.getElementsByName('answer')
// radioBtnValue.forEach((el)=>{
// checkAns(el,quizData,index)
// // if(el.checked && el.id===quizData[index].correctAns){
// // console.log(el)
// // alert('correct ans')
// // break;
// // }
// // else{
// // alert('incorrect ans')
// // return;
// // }
})
}
else{
index=getRandomQuestion()
console.log('inside else ',index)
}
console.log(quizData)
}
window.onload=startQuiz