Javascript 如何创建测验结果'；使用jquery

我有一个简单的测验，其中使用jquery只包含六个问题，一切都很完美

以下是JSFIDLE：

最终的结果UI如下所示

我希望最终结果的复选框被选中的问题的基础上，用户得到它的权利 假设用户答对了4个问题，最终的UI应该是这样的

这是我的解决办法

//JavaScript文档
$（文档）.ready（函数（）{
“严格使用”；
变量问题=[{
问题：“谁是美国总统？”，
选择：[“特朗普”、“拜登”]，
正确答案：0
}, {
问题：“澳大利亚的首都是什么？”，
选择：[“墨尔本”、“悉尼”、]，
正确答案:1
}, {
问：“谁是英国总理？”
选择：[“托尼·布莱尔”、“凯恩”]，
正确答案：0
}, {
问题：“第一个完全数是什么？”，
选项：[38,6,0]，
正确答案：0
},
{
问题:"二加一",，
选项：[1,2,3]，
正确答案:1
},
{
问题：“肯尼亚在非洲吗？”，
选项：[“是”、“否”]，
正确答案：0
}
];
var questionCounter=0；//跟踪问题编号
var selections=[]；//包含用户选择的数组
var quick=$（'.content'）；//quick div对象
//显示初始问题
displayNext（）；
//单击“下一步”按钮的处理程序
$（“#下一步”）。在（'click'，函数（e）{
e、 预防默认值（）；
//在淡入淡出动画期间暂停单击侦听器
if（quick.is（':animated'））{
返回false；
}
选择（）；
//如果没有用户选择，则停止进度
if（isNaN（选择[问询计数器]）{
$（'警告'）.text（'请选择！'）；
}否则{
问句器++；
displayNext（）；
$（“#警告”）。文本（“”）；
}
});
//单击“prev”按钮的处理程序
$（'prev'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（quick.is（':animated'））{
返回false；
}
选择（）；
问讯台--；
displayNext（）；
});
//单击“重新开始”按钮的处理程序
$（'#start'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（quick.is（':animated'））{
返回false；
}
问讯员=0；
选择=[]；
displayNext（）；
$（'#start'）.hide（）；
});
//创建并返回包含问题和答案的div
//答案选择
函数createQuestionElement（索引）{
变量qElement=$（''{
id:“问题”
});
var头=$（'Question'+（index+1）+'：'）；
追加（标题）；
var question=$（“”）.append（问题[index].question）；
附加（问题）；
var radioButtons=createRadios（索引）；
qElement.append（单选按钮）；
//这是新的
var warningText=$（'
'）；
qElement.append（warningText）；
返回元素；
}
//创建答案选项列表作为无线电输入
函数createRadios（索引）{
var放射科医生=$（“
”）；
var项目；
var输入=“”；
对于（var i=0；i”）；
输入=''；
输入+=问题[索引]。选项[i]；
项目。追加（输入）；
放射科医生。追加（项目）；
}
返回放射科医生；
}
//读取用户选择并将值推送到数组
函数选择（）{
选择[questionCounter]=+$（'input[name=“answer”]：选中'）。val（）；
}
//显示下一个请求的元素
函数displayNext（）{
测验.淡出（函数（）{
$（“#问题”）.remove（）；
if（问询台=0.9）{
score.append（'难以置信！你得到了'+numCorrect+'out'+
questions.length+questions right！）；
}否则，如果（百分比>=0.7）{
score.append（'干得好！你从'+
questions.length+questions right！）；
}否则，如果（百分比>=0.5）{
score.append（'You got'+numCorrect+'out'+
questions.length+questions right.）；
}否则{
score.append（'你只得到了'+numCorrect+'out'+
questions.length+“是的，想再试一次吗？”；
}
返回分数；
}
});

下一个
上
从头开始//勾选最终结果的输入

一,
二,
三,
四,
五,
六,

在displayScore（）函数中，您可以选择整个结果集合复选框，并将其保存为变量。如下所示：
var checkbox=$（'#结果输入li'）.children（）

然后，在您的循环中检查
  // Computes score and returns a paragraph element to be displayed
  function displayScore() {
  console.log(selections);
    var score = $('<h3>',{id: 'question'});
    $("#result-input").removeClass('hide-input');
    $("#result-input").addClass('show-input');
    var numCorrect = 0;
    // Selects collection of checkboxes
    var checkbox = $('#result-input li').children();
    for (var i = 0; i < selections.length; i++) {
      if (selections[i] === questions[i].correctAnswer) {
        numCorrect++;
        // Selects single checkbox and sets it to checked if answer is correct.
        $(checkbox[i]).prop('checked', true);
      }
    }
    // Calculate score and display relevant message
    var percentage = numCorrect / questions.length;
    if (percentage >= 0.9){
        score.append('Incredible! You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right!');
    }

    else if (percentage >= 0.7){
        score.append('Good job! You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right!');
    }

    else if (percentage >= 0.5){
        score.append('You got ' + numCorrect + ' out of ' +
                 questions.length + ' questions right.');
    }

    else {
        score.append('You only got ' + numCorrect + ' out of ' +
                 questions.length + ' right. Want to try again?');
    }
    return score;
  }
});