计算所选选项总数的Javascript测验



我想做一个这样的测试:每个问题都有不同数量的答案选项,每个选项都有不同的值。在测验结束时,我需要得到所选选项的总数。我无法运行它。有什么建议吗?

HTML看起来像:

<div id="question" class="question"></div>
<label class="option">
<input type="radio" name="option" value="" />
<span class="option"></span>
</label>
const questions = [
{
question: 'Q1',
answers: [
{ text: 'A1', score: 100 },
{ text: 'A2', score: 60 },
{ text: 'A3', score: 30 }
]
},
{
question: 'Q2',
answers: [
{ text: 'A1', score: 150 },
{ text: 'A2', score: 130 },
{ text: 'A3', score: 250 },
{ text: 'A4', score: 250 },
{ text: 'A5', score: 250 }
]
},
{
question: 'Q3',
answers: [
{ text: 'A1', score: 250 },
{ text: 'A2', score: 500 }
]
} 
]

这是我的解决方案,我将每个问题的所有答案放入一个选择框中。

const questions = [
{
question: 'Q1',
answers: [
{ text: 'A1', score: 100 },
{ text: 'A2', score: 60 },
{ text: 'A3', score: 30 }
]
},
{
question: 'Q2',
answers: [
{ text: 'A1', score: 150 },
{ text: 'A2', score: 130 },
{ text: 'A3', score: 250 },
{ text: 'A4', score: 250 },
{ text: 'A5', score: 250 }
]
},
{
question: 'Q3',
answers: [
{ text: 'A1', score: 250 },
{ text: 'A2', score: 500 }
]
} 
]
let questionZone=document.getElementById('questionZone');
questionZone.innerHTML='';
questions.forEach(item=>{
let div=document.createElement('div');
div.className="question";
div.id=item.question;
div.innerHTML=item.question+':';
questionZone.appendChild(div);
let label=document.createElement('label');
let select=document.createElement('select');
label.className="option";
label.appendChild(select);
select.name=item.question;
item.answers.forEach(answerItem=>{
let option=document.createElement('option');
option.text=answerItem.text;
option.value=answerItem.score;
select.appendChild(option)
})
div.appendChild(label);
})
function getTotalScore(vv){
let totalValue=0;
questions.forEach(item=>{
totalValue+=Number(vv[item.question].value);
});
let totalScore=document.getElementById("totalScore");
totalScore.innerHTML='Total Score:'+totalValue;
return false;
}
<form id='form1' onsubmit="return false;">
<div id='questionZone'>
</div>
<button onclick='getTotalScore(this.form)'>
Get Total Score
</button>
</form>
<div id="totalScore">
Total Score:0
</div>

最新更新