为什么这个测验不显示问题？

分类：编程问答

如何解决为什么这个测验不显示问题？

这个测验应该是这样的 [！[在此处输入图片描述] [1]] [1]

这适用于[codepon.io] [2]，但不适用于Blogger。我已经在JsFiddle中尝试过，但是也无法正常工作。 这是代码

var $progressValue = 0;
var resultList=[];


const quizdata=[
      {
        question:"Characterized by skill at understanding and profiting by circumstances",options:["Prescient","Analyst","Diminution","Shrewd"],answer:"Shrewd",category:1
      },{
        question:"To refuse to acknowledge as one's own or as connected with oneself",options:["Prevalent","Disown","Squalid","Employee"],answer:"Disown",category:2
      },];
/** Random shuffle questions **/
function shuffleArray(question){
   var shuffled=question.sort(function() {
    return .5 - Math.random();
 });
   return shuffled;
}

function shuffle(a) {
  for (var i = a.length; i; i--) {
    var j = Math.floor(Math.random() * i);
    var _ref = [a[j],a[i - 1]];
    a[i - 1] = _ref[0];
    a[j] = _ref[1];
  }
}

/*** Return shuffled question ***/
function generateQuestions(){
  var questions=shuffleArray(quizdata);    
  return questions;
}

/*** Return list of options ***/
function returnOptionList(opts,i){

  var optionHtml='<li class="myoptions">'+
    '<input value="'+opts+'" name="optRdBtn" type="radio" id="rd_'+i+'">'+
    '<label for="rd_'+i+'">'+opts+'</label>'+
    '<div class="bullet">'+
      '<div class="line zero"></div>'+
      '<div class="line one"></div>'+
      '<div class="line two"></div>'+
      '<div class="line three"></div>'+
      '<div class="line four"></div>'+
      '<div class="line five"></div>'+
      '<div class="line six"></div>'+
      '<div class="line seven"></div>'+
    '</div>'+
  '</li>';

  return optionHtml;
}

/** Render Options **/
function renderOptions(optionList){
  var ulContainer=$('<ul>').attr('id','optionList');
  for (var i = 0,len = optionList.length; i < len; i++) {
    var optionContainer=returnOptionList(optionList[i],i)
    ulContainer.append(optionContainer);
  }
  $(".answerOptions").html('').append(ulContainer);
}

/** Render question **/
function renderQuestion(question){
  $(".question").html("<h1>"+question+"</h1>");
}

/** Render quiz :: Question and option **/
function renderQuiz(questions,index){ 
  var currentQuest=questions[index];  
  renderQuestion(currentQuest.question); 
  renderOptions(currentQuest.options); 
  console.log("Question");
  console.log(questions[index]);
}

/** Return correct answer of a question ***/
function getCorrectAnswer(questions,index){
  return questions[index].answer;
}

/** pushanswers in array **/
function correctAnswerArray(resultByCat){
  var arrayForChart=[];
  for(var i=0; i<resultByCat.length;i++){
   arrayForChart.push(resultByCat[i].correctanswer);
  }

  return arrayForChart;
}
/** Generate array for percentage calculation **/
function genResultArray(results,wrong){
  var resultByCat = resultByCategory(results);
  var arrayForChart=correctAnswerArray(resultByCat);
  arrayForChart.push(wrong);
  return arrayForChart
}

/** percentage Calculation **/
function percentCalculation(array,total){
  var percent = array.map(function (d,i) {
    return (100 * d / total).toFixed(2);
  });
  return percent;
}

/*** Get percentage for chart **/
function getPercentage(resultByCat,wrong){
  var totalNumber=resultList.length;
  var wrongAnwer=wrong;
  //var arrayForChart=genResultArray(resultByCat,wrong);
  //return percentCalculation(arrayForChart,totalNumber);
}

/** count right and wrong answer number **/
function countAnswers(results){

  var countCorrect=0,countWrong=0;

  for(var i=0;i<results.length;i++){
    if(results[i].iscorrect==true)  
        countCorrect++;
    else countWrong++;
  }

  return [countCorrect,countWrong];
}

/**** Categorize result *****/
function resultByCategory(results){

  var categoryCount = [];
  var ctArray=results.reduce(function (res,value) {
    if (!res[value.category]) {
        res[value.category] = {
            category: value.category,correctanswer: 0           
        };
        categoryCount.push(res[value.category])
    }
    var val=(value.iscorrect==true)?1:0;
    res[value.category].correctanswer += val; 
    return res;
  },{});

  categoryCount.sort(function(a,b) {
    return a.category - b.category;
  });

  return categoryCount;
}


/** Total score pie chart**/
function totalPieChart(_upto,_cir_progress_id,_correct,_incorrect) {

   $("#"+_cir_progress_id).find("._text_incor").html("Incorrect : "+_incorrect);
   $("#"+_cir_progress_id).find("._text_cor").html("Correct : "+_correct);

   var unchnagedPer=_upto;
   
    _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto);

    var _progress = 0;

    var _cir_progress = $("#"+_cir_progress_id).find("._cir_P_y");
    var _text_percentage = $("#"+_cir_progress_id).find("._cir_Per");

    var _input_percentage;
    var _percentage;

    var _sleep = setInterval(_animateCircle,25);

    function _animateCircle() {
      //2*pi*r == 753.6 +xxx=764
        _input_percentage = (_upto / 100) * 764;
        _percentage = (_progress / 100) * 764;

        _text_percentage.html(_progress + '%');

        if (_percentage >= _input_percentage) {
             _text_percentage.html('<tspan x="50%" dy="0em">'+unchnagedPer + '% </tspan><tspan  x="50%" dy="1.9em">Your Score</tspan>');
            clearInterval(_sleep);
        } else {

            _progress++;

            _cir_progress.attr("stroke-dasharray",_percentage + ',764');
        }
    }
}

function renderBriefChart(correct,total,incorrect){
  var percent=(100 * correct / total);
  if(Math.round(percent) !== percent) {
          percent = percent.toFixed(2);
  }

 totalPieChart(percent,'_cir_progress',correct,incorrect)
   
}
/*** render chart for result **/
function renderChart(data){
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx,{
    type: 'doughnut',data: {
    labels: [ "Verbal communication","Non-verbal communication","Written communication","Incorrect"
            ],datasets: [
                {
                 
                  data: data,backgroundColor: [  '#e6ded4','#968089','#e3c3d4','#ab4e6b'
                                    ],borderColor: [  'rgba(239,239,81,1)','#8e3407','rgba((239,'#000000'
                                ],borderWidth: 1
                }
              ]
    },options: {
         pieceLabel: {
          render: 'percentage',fontColor: 'black',precision: 2
        }
      }
    
  });
}

/** List question and your answer and correct answer  

*****/
function getAllAnswer(results){
    var innerhtml="";
    for(var i=0;i<results.length;i++){

      var _class=((results[i].iscorrect)?"item-correct":"item-incorrect");
       var _classH=((results[i].iscorrect)?"h-correct":"h-incorrect");
      

      var _html='<div class="_resultboard '+_class+'">'+
                  '<div class="_header">'+results[i].question+'</div>'+
                  '<div class="_yourans '+_classH+'">'+results[i].clicked+'</div>';

        var html="";
       if(!results[i].iscorrect)
        html='<div class="_correct">'+results[i].answer+'</div>';
       _html=(_html+html)+'</div>';
       innerhtml+=_html;
    }

  $(".allAnswerBox").html('').append(innerhtml);
}
/** render  Brief Result **/
function renderResult(resultList){ 
  
  var results=resultList;
  console.log(results);
  var countCorrect=countAnswers(results)[0],countWrong=countAnswers(results)[1];
  
  
  renderBriefChart(countCorrect,resultList.length,countWrong);
}

function renderChartResult(){
   var results=resultList; 
  var countCorrect=countAnswers(results)[0],countWrong=countAnswers(results)[1];
  var dataForChart=genResultArray(resultList,countWrong);
  renderChart(dataForChart);
}

/** Insert progress bar in html **/
function getProgressindicator(length){
  var progressbarhtml=" ";
  for(var i=0;i<length;i++){
    progressbarhtml+='<div class="my-progress-indicator progress_'+(i+1)+' '+((i==0)?"active":"")+'"></div>';
  }
  $(progressbarhtml).insertAfter(".my-progress-bar");
} 

/*** change progress bar when next button is clicked ***/
function changeProgressValue(){
  $progressValue+= 9;
  if ($progressValue >= 100) {
    
  } else {
    if($progressValue==99) $progressValue=100;
    $('.my-progress')
      .find('.my-progress-indicator.active')
      .next('.my-progress-indicator')
      .addClass('active');      
    $('progress').val($progressValue);
  }
  $('.js-my-progress-completion').html($('progress').val() + '% complete');

}   
function addClickedAnswerToResult(questions,presentIndex,clicked ){
  var correct=getCorrectAnswer(questions,presentIndex);
    var result={
      index:presentIndex,question:questions[presentIndex].question,clicked:clicked,iscorrect:(clicked==correct)?true:false,answer:correct,category:questions[presentIndex].category
    }
    resultList.push(result);

    console.log("result");
    console.log(result);
      
}

$(document).ready(function() {
  
  var presentIndex=0;
   var clicked=0;

  var questions=generateQuestions();
  renderQuiz(questions,presentIndex);
  getProgressindicator(questions.length);

  $(".answerOptions ").on('click','.myoptions>input',function(e){
    clicked=$(this).val();   

    if(questions.length==(presentIndex+1)){
      $("#submit").removeClass('hidden');
      $("#next").addClass("hidden");
    }
    else{

      $("#next").removeClass("hidden");
    }

     
  
  });



  $("#next").on('click',function(e){
    e.preventDefault();
    addClickedAnswerToResult(questions,clicked);

    $(this).addClass("hidden");
    
    presentIndex++;
    renderQuiz(questions,presentIndex);
    changeProgressValue();
  });

  $("#submit").on('click',function(e){
     addClickedAnswerToResult(questions,clicked);
    $('.multipleChoiceQues').hide();
    $(".resultArea").show();
    renderResult(resultList);

  });

  
  

   $(".resultArea").on('click','.viewchart',function(){
      $(".resultPage2").show();
       $(".resultPage1").hide();
       $(".resultPage3").hide();
       renderChartResult();
   });

    $(".resultArea").on('click','.backBtn',function(){
      $(".resultPage1").show();
       $(".resultPage2").hide();
       $(".resultPage3").hide();
        renderResult(resultList);
   });

    $(".resultArea").on('click','.viewanswer',function(){
      $(".resultPage3").show();
       $(".resultPage2").hide();
       $(".resultPage1").hide();
        getAllAnswer(resultList);
   });

  $(".resultArea").on('click','.replay',function(){
    window.location.reload(true);
  });

});
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

 
.quizArea{
  width: 95%;
 margin:  auto;
 padding:10px;
 position: relative;
 text-align: center;
 }
.mc_quiz{
    color: #3a5336;
    margin-bottom: 0px;
}



.multipleChoiceQues{
  width:90%;
  margin: auto;
  padding: 10px;
   
}
.quizBox
{
    width:90%;
    margin: auto;

}

.question{
    text-align: center;
  font-size: 0.8em;
}




  
}
#next:active,#submit:active,.viewanswer:active,.viewchart:active,.backBtn:active,.replay:active  {
  letter-spacing: 0.3em;
}

.resultArea{
    display: none;
    width:70%;
    margin: auto;
    
    padding: 10px;
    
}

.chartBox{
    width: 60%;
    margin:auto;
}

.resultPage1{
    
    text-align: center;
    
}
.resultBox h1{
    
}

.briefchart
{
    text-align:center;
}


.resultPage2,.resultPage3
{
    display: none;
    text-align: center;
}

.allAnswerBox{
    width: 100%;
    margin: 0;
    position: relative;
}

._resultboard{
    position: relative;
    display:inline-block;
    width: 40%;
    padding: 2%;
    height: 190px;
    vertical-align: top;
    border-bottom: 0.6px solid rgba(255,255,0.2);
    text-align: left;
    margin-bottom: 4px;
    
}

._resultboard:nth-child(even){
    
    
    margin-left: 5px;
    border-left: 0.6px solid rgba(255,0.2);
}
._resultboard:nth-last-child(2),._resultboard:nth-last-child(1){
    border-bottom: 0px;
}

._header{
    font-weight: bold;
    margin-bottom: 8px;
    height: 90px;
}

._yourans,._correct{
    margin-bottom: 8px;
    position: relative;
    line-height: 2;
    padding: 5px; 
}
._correct{
    background: #968089 ;
}
.h-correct{
    background: #968089;

}

.h-correct:after,._correct:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00c";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #2dceb1;
}
.h-incorrect{
    background: #ab4e6b ;
}
.h-incorrect:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00d";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #ff383e;
}

.resultPage3 h1,.resultPage1 h1,.resultPage2 h1{
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1.3px solid rgba(21,63,101,0.9);
    color: #3a5336;
}

.my-progress {
  position: relative;
  display: block;
  margin: 3rem auto 0rem;
  width: 100%;
  max-width: 950px;
}

progress {
  display: block;
  position: relative;
  top: -0.5px;
    left: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: #f1f2ec ;
  width: 100%;
  height: 2.5px;
  background: none;
  -webkit-transition: 1s;
  transition: 1s;
  will-change: contents;
}
progress::-webkit-progress-bar {
  background-color: #f1f2ec;
}
progress::-webkit-progress-value {
  background-color:#153f65;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.my-progress-indicator {
  position: absolute;
  top: -6px;
  left: 0;
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #7aa4a9;
  border: 3px solid #f1f2ec;
  border-radius: 50%;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
  will-change: transform;
}
.my-progress-indicator.progress_1 {
  left: 0;
}
.my-progress-indicator.progress_2 {
  left: 9%;
}
.my-progress-indicator.active {
  -webkit-animation: bounce .5s forwards;
          animation: bounce .5s forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
  border-color: #153f65 ;
 
}

.animation-container {
  position: relative;
  width: 100%;
  -webkit-transition: .3s;
  transition: .3s;
  will-change: padding;
  overflow: hidden;
}

.form-step {
  position: absolute;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  will-change: transform,opacity;
}

.form-step.leaving {
  -webkit-animation: left-and-out .5s forwards;
          animation: left-and-out .5s forwards;
}

.form-step.waiting {
  -webkit-transform: translateX(400px);
          transform: translateX(400px);
}

.form-step.coming {
  -webkit-animation: right-and-in .5s forwards;
          animation: right-and-in .5s forwards;
}

@-webkit-keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
}

@keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
            transform: translateX(-400px);
  }
}
@-webkit-keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0);
  border: 0;
}

.hidden {
  display: none;
}


ul{
    list-style-type: none;
    width: 220px;
    margin: auto;
    text-align: left;
}

li {
    position: relative;
    padding: 10px;
    padding-left: 40px;
    height:30px;
}
label{
    color: #fff;
}
label:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #fff ;
    position: absolute;
    left: 7px;
        top: calc(50% - 13px);
    box-sizing: border-box;
    border-radius: 50%;
}

input[type="radio"] {
    opacity: 0;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
    margin: 0;
    padding: 0;
  width: 100%;
    height: 30px;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    cursor: pointer;
}

.bullet {
    position: relative;
    width: 25px;
    height: 25px;
    left: -3px;
    top: 2px;
    border: 5px solid #fff ;
    opacity: 0;
    border-radius: 50%;
}

input[type="radio"]:checked ~ .bullet {
    position:absolute;
    opacity: 1;
    animation-name: explode;
    animation-duration: 0.350s;
}

.line {
    position: absolute;
    width: 10px;
    height: 2px;
    background-color: #fff ;
    opacity:0;
}

.line.zero {
    left: 11px;
    top: -21px;
    transform: translateY(20px);
    width: 2px;
    height: 10px;
}

.line.one {
    right: -7px;
    top: -11px;
    transform: rotate(-55deg) translate(-9px);
}

.line.two {
    right: -20px;
    top: 11px;
    transform: translate(-9px);
}

.line.three {
    right: -8px;
    top: 35px;
    transform: rotate(55deg) translate(-9px);
}

.line.four {
    left: -8px;
    top: -11px;
    transform: rotate(55deg) translate(9px);
}

.line.five {
    left: -20px;
    top: 11px;
    transform: translate(9px);
}

.line.six {
    left: -8px;
    top: 35px;
    transform: rotate(-55deg) translate(9px);
}

.line.seven {
    left: 11px;
    bottom: -21px;
    transform: translateY(-20px);
    width: 2px;
    height: 10px;
}

input[type="radio"]:checked ~ .bullet .line.zero{
    animation-name:drop-zero;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.one{
    animation-name:drop-one;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.two{
    animation-name:drop-two;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.three{
    animation-name:drop-three;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.four{
    animation-name:drop-four;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.five{
    animation-name:drop-five;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.six{
    animation-name:drop-six;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

input[type="radio"]:checked ~ .bullet .line.seven{
    animation-name:drop-seven;
    animation-delay: 0.100s;
    animation-duration: 0.9s;
    animation-fill-mode: forwards;
}

@keyframes explode {
    0%{
        opacity: 0;
        transform: scale(10);
    }
    60%{
        opacity: 1;
        transform: scale(0.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes drop-zero {
    0% {
        opacity: 0;
        transform: translateY(20px);
        height: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: translateY(-2px);
        height: 0px;
        opacity:0;
    }
}

@keyframes drop-one {
    0% {
        opacity: 0;
        transform: rotate(-55deg) translate(-20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: rotate(-55deg) translate(9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-two {
    0% {
        opacity: 0;
        transform: translate(-20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: translate(9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-three {
    0% {
        opacity: 0;
        transform: rotate(55deg) translate(-20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: rotate(55deg) translate(9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-four {
    0% {
        opacity: 0;
        transform: rotate(55deg) translate(20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: rotate(55deg) translate(-9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-five {
    0% {
        opacity: 0;
        transform: translate(20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: translate(-9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-six {
    0% {
        opacity: 0;
        transform: rotate(-55deg) translate(20px);
        width: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: rotate(-55deg) translate(-9px);
        width: 0px;
        opacity:0;
    }
}

@keyframes drop-seven {
0% {
        opacity: 0;
        transform: translateY(-20px);
        height: 10px;
    }
    20% {
        opacity:1;
    }
    100% {
        transform: translateY(2px);
        height: 0px;
        opacity:0;
    }
}
<div class="quizArea">
  <div class="multipleChoiceQues">
  <h1 class="mc_quiz">
    Quiz
  </h1>
    <div class="my-progress">
        <progress class="my-progress-bar" min="0" max="100" value="0" step="9" aria-labelledby="my-progress-completion"></progress>    
        <p id="my-progress-completion" class="js-my-progress-completion sr-only" aria-live="polite">0% complete</p>
    </div>
    <div class="quizBox">
      <div class="question"> </div>
      <div class="answerOptions"></div>
      <div class="buttonArea">
        <button id="next"  class="hidden">Next</button>
        <button id="submit"  class="hidden">Submit</button>
      </div>
    </div>
  </div>
  <div class="resultArea">  
    <div class="resultPage1">
      <div class="resultBox">
        <h1>Result Summary</h1>
      </div>
      <div class="briefchart">
        <svg height="300" width="300" id="_cir_progress">
          <g>
            <rect x="0" y="1" width="30" height="15"  fill="#ab4e6b" />
            <text x="32" y="14" font-size="14"  class="_text_incor">Incorrect : 12 </text>
          </g>
          <g>
            <rect x="160" y="1" width="30" height="15"  fill="#968089" />
            <text x="192" y="14" font-size="14" class="_text_cor">Correct : 12</text>
         </g>          
          <circle class="_cir_P_x" cx="150" cy="150" r="120" stroke="#ab4e6b" stroke-width="20" fill="none" onmouseover="evt.target.setAttribute('stroke','rgba(171,78,107,0.7)');" onmouseout="evt.target.setAttribute('stroke','#ab4e6b');"></circle>

          <circle class="_cir_P_y" cx="150" cy="150" r="120" stroke="#968089" stroke-width="20"  stroke-dasharray="0,1000" fill="none"  onmouseover="evt.target.setAttribute('stroke','rgba(150,128,137,'#968089');"></circle>
          <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
          </svg>
      </div>

      <div class="resultBtns">
        <button class="viewanswer">View Answers</button>
        <button class="viewchart">View Chart</button>
        <button class="replay"><i class="fa fa-repeat" style="font-size:1em;"></i> <br/>Replay</button>
      </div>
    </div>

    <div class="resultPage2">
      <h1>Your Result</h1>
      <div class="chartBox">
        <canvas id="myChart" width="400" height="400"></canvas>
      </div>
      <button class="backBtn">Back</button>
    </div>

    <div class="resultPage3">
      <h1>Your Answers</h1>
      <div class="allAnswerBox">
        
      </div>
      <button class="backBtn">Back</button>
    </div>

  </div>
</div>

我不知道必须修复哪个部分。谢谢 [1]：https://i.stack.imgur.com/TllgA.png [2]：https://codepen.io/Helina/pen/oGjWNe

解决方法

它正在生成问题，问题是您看不到它们。您需要更改CSS。仅供参考，将来请创建一个“最小可复制示例”-对于更复杂的问题，很难使用这么多不相关的代码。

如果您在问题div中添加背景色，请参见下面的代码段：

var $progressValue = 0;
var resultList = [];


const quizdata = [{
    question: "Characterized by skill at understanding and profiting by circumstances",options: ["Prescient","Analyst","Diminution","Shrewd"],answer: "Shrewd",category: 1
  },{
    question: "To refuse to acknowledge as one's own or as connected with oneself",options: ["Prevalent","Disown","Squalid","Employee"],answer: "Disown",category: 2
  },];
/** Random shuffle questions **/
function shuffleArray(question) {
  var shuffled = question.sort(function() {
    return .5 - Math.random();
  });
  return shuffled;
}

function shuffle(a) {
  for (var i = a.length; i; i--) {
    var j = Math.floor(Math.random() * i);
    var _ref = [a[j],a[i - 1]];
    a[i - 1] = _ref[0];
    a[j] = _ref[1];
  }
}

/*** Return shuffled question ***/
function generateQuestions() {
  var questions = shuffleArray(quizdata);
  return questions;
}

/*** Return list of options ***/
function returnOptionList(opts,i) {

  var optionHtml = '<li class="myoptions">' +
    '<input value="' + opts + '" name="optRdBtn" type="radio" id="rd_' + i + '">' +
    '<label for="rd_' + i + '">' + opts + '</label>' +
    '<div class="bullet">' +
    '<div class="line zero"></div>' +
    '<div class="line one"></div>' +
    '<div class="line two"></div>' +
    '<div class="line three"></div>' +
    '<div class="line four"></div>' +
    '<div class="line five"></div>' +
    '<div class="line six"></div>' +
    '<div class="line seven"></div>' +
    '</div>' +
    '</li>';

  return optionHtml;
}

/** Render Options **/
function renderOptions(optionList) {
  var ulContainer = $('<ul>').attr('id','optionList');
  for (var i = 0,len = optionList.length; i < len; i++) {
    var optionContainer = returnOptionList(optionList[i],i)
    ulContainer.append(optionContainer);
  }
  $(".answerOptions").html('').append(ulContainer);
}

/** Render question **/
function renderQuestion(question) {
  $(".question").html("<h1>" + question + "</h1>");
}

/** Render quiz :: Question and option **/
function renderQuiz(questions,index) {
  var currentQuest = questions[index];
  renderQuestion(currentQuest.question);
  renderOptions(currentQuest.options);
}

/** Return correct answer of a question ***/
function getCorrectAnswer(questions,index) {
  return questions[index].answer;
}

/** pushanswers in array **/
function correctAnswerArray(resultByCat) {
  var arrayForChart = [];
  for (var i = 0; i < resultByCat.length; i++) {
    arrayForChart.push(resultByCat[i].correctanswer);
  }

  return arrayForChart;
}
/** Generate array for percentage calculation **/
function genResultArray(results,wrong) {
  var resultByCat = resultByCategory(results);
  var arrayForChart = correctAnswerArray(resultByCat);
  arrayForChart.push(wrong);
  return arrayForChart
}

/** percentage Calculation **/
function percentCalculation(array,total) {
  var percent = array.map(function(d,i) {
    return (100 * d / total).toFixed(2);
  });
  return percent;
}

/*** Get percentage for chart **/
function getPercentage(resultByCat,wrong) {
  var totalNumber = resultList.length;
  var wrongAnwer = wrong;
  //var arrayForChart=genResultArray(resultByCat,wrong);
  //return percentCalculation(arrayForChart,totalNumber);
}

/** count right and wrong answer number **/
function countAnswers(results) {

  var countCorrect = 0,countWrong = 0;

  for (var i = 0; i < results.length; i++) {
    if (results[i].iscorrect == true)
      countCorrect++;
    else countWrong++;
  }

  return [countCorrect,countWrong];
}

/**** Categorize result *****/
function resultByCategory(results) {

  var categoryCount = [];
  var ctArray = results.reduce(function(res,value) {
    if (!res[value.category]) {
      res[value.category] = {
        category: value.category,correctanswer: 0
      };
      categoryCount.push(res[value.category])
    }
    var val = (value.iscorrect == true) ? 1 : 0;
    res[value.category].correctanswer += val;
    return res;
  },{});

  categoryCount.sort(function(a,b) {
    return a.category - b.category;
  });

  return categoryCount;
}


/** Total score pie chart**/
function totalPieChart(_upto,_cir_progress_id,_correct,_incorrect) {

  $("#" + _cir_progress_id).find("._text_incor").html("Incorrect : " + _incorrect);
  $("#" + _cir_progress_id).find("._text_cor").html("Correct : " + _correct);

  var unchnagedPer = _upto;

  _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto);

  var _progress = 0;

  var _cir_progress = $("#" + _cir_progress_id).find("._cir_P_y");
  var _text_percentage = $("#" + _cir_progress_id).find("._cir_Per");

  var _input_percentage;
  var _percentage;

  var _sleep = setInterval(_animateCircle,25);

  function _animateCircle() {
    //2*pi*r == 753.6 +xxx=764
    _input_percentage = (_upto / 100) * 764;
    _percentage = (_progress / 100) * 764;

    _text_percentage.html(_progress + '%');

    if (_percentage >= _input_percentage) {
      _text_percentage.html('<tspan x="50%" dy="0em">' + unchnagedPer + '% </tspan><tspan  x="50%" dy="1.9em">Your Score</tspan>');
      clearInterval(_sleep);
    } else {

      _progress++;

      _cir_progress.attr("stroke-dasharray",_percentage + ',764');
    }
  }
}

function renderBriefChart(correct,total,incorrect) {
  var percent = (100 * correct / total);
  if (Math.round(percent) !== percent) {
    percent = percent.toFixed(2);
  }

  totalPieChart(percent,'_cir_progress',correct,incorrect)

}
/*** render chart for result **/
function renderChart(data) {
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx,{
    type: 'doughnut',data: {
      labels: ["Verbal communication","Non-verbal communication","Written communication","Incorrect"
      ],datasets: [{

        data: data,backgroundColor: ['#e6ded4','#968089','#e3c3d4','#ab4e6b'
        ],borderColor: ['rgba(239,239,81,1)','#8e3407','rgba((239,'#000000'
        ],borderWidth: 1
      }]
    },options: {
      pieceLabel: {
        render: 'percentage',fontColor: 'black',precision: 2
      }
    }

  });
}

/** List question and your answer and correct answer  

*****/
function getAllAnswer(results) {
  var innerhtml = "";
  for (var i = 0; i < results.length; i++) {

    var _class = ((results[i].iscorrect) ? "item-correct" : "item-incorrect");
    var _classH = ((results[i].iscorrect) ? "h-correct" : "h-incorrect");


    var _html = '<div class="_resultboard ' + _class + '">' +
      '<div class="_header">' + results[i].question + '</div>' +
      '<div class="_yourans ' + _classH + '">' + results[i].clicked + '</div>';

    var html = "";
    if (!results[i].iscorrect)
      html = '<div class="_correct">' + results[i].answer + '</div>';
    _html = (_html + html) + '</div>';
    innerhtml += _html;
  }

  $(".allAnswerBox").html('').append(innerhtml);
}
/** render  Brief Result **/
function renderResult(resultList) {

  var results = resultList;
  console.log(results);
  var countCorrect = countAnswers(results)[0],countWrong = countAnswers(results)[1];


  renderBriefChart(countCorrect,resultList.length,countWrong);
}

function renderChartResult() {
  var results = resultList;
  var countCorrect = countAnswers(results)[0],countWrong = countAnswers(results)[1];
  var dataForChart = genResultArray(resultList,countWrong);
  renderChart(dataForChart);
}

/** Insert progress bar in html **/
function getProgressindicator(length) {
  var progressbarhtml = " ";
  for (var i = 0; i < length; i++) {
    progressbarhtml += '<div class="my-progress-indicator progress_' + (i + 1) + ' ' + ((i == 0) ? "active" : "") + '"></div>';
  }
  $(progressbarhtml).insertAfter(".my-progress-bar");
}

/*** change progress bar when next button is clicked ***/
function changeProgressValue() {
  $progressValue += 9;
  if ($progressValue >= 100) {

  } else {
    if ($progressValue == 99) $progressValue = 100;
    $('.my-progress')
      .find('.my-progress-indicator.active')
      .next('.my-progress-indicator')
      .addClass('active');
    $('progress').val($progressValue);
  }
  $('.js-my-progress-completion').html($('progress').val() + '% complete');

}

function addClickedAnswerToResult(questions,presentIndex,clicked) {
  var correct = getCorrectAnswer(questions,presentIndex);
  var result = {
    index: presentIndex,question: questions[presentIndex].question,clicked: clicked,iscorrect: (clicked == correct) ? true : false,answer: correct,category: questions[presentIndex].category
  }
  resultList.push(result);
}

$(document).ready(function() {

  var presentIndex = 0;
  var clicked = 0;

  var questions = generateQuestions();
  renderQuiz(questions,presentIndex);
  getProgressindicator(questions.length);

  $(".answerOptions ").on('click','.myoptions>input',function(e) {
    clicked = $(this).val();

    if (questions.length == (presentIndex + 1)) {
      $("#submit").removeClass('hidden');
      $("#next").addClass("hidden");
    } else {

      $("#next").removeClass("hidden");
    }
  });


  $("#next").on('click',function(e) {
    e.preventDefault();
    addClickedAnswerToResult(questions,clicked);

    $(this).addClass("hidden");

    presentIndex++;
    renderQuiz(questions,presentIndex);
    changeProgressValue();
  });

  $("#submit").on('click',function(e) {
    addClickedAnswerToResult(questions,clicked);
    $('.multipleChoiceQues').hide();
    $(".resultArea").show();
    renderResult(resultList);

  });

  $(".resultArea").on('click','.viewchart',function() {
    $(".resultPage2").show();
    $(".resultPage1").hide();
    $(".resultPage3").hide();
    renderChartResult();
  });

  $(".resultArea").on('click','.backBtn',function() {
    $(".resultPage1").show();
    $(".resultPage2").hide();
    $(".resultPage3").hide();
    renderResult(resultList);
  });

  $(".resultArea").on('click','.viewanswer',function() {
    $(".resultPage3").show();
    $(".resultPage2").hide();
    $(".resultPage1").hide();
    getAllAnswer(resultList);
  });

  $(".resultArea").on('click','.replay',function() {
    window.location.reload(true);
  });

});
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea {
  width: 95%;
  margin: auto;
  padding: 10px;
  position: relative;
  text-align: center;
  background: cornflowerblue;
}

.mc_quiz {
  color: #3a5336;
  margin-bottom: 0px;
}

.multipleChoiceQues {
  width: 90%;
  margin: auto;
  padding: 10px;
}

.quizBox {
  width: 90%;
  margin: auto;
}

.question {
  text-align: center;
  font-size: 0.8em;
}


}
#next:active,#submit:active,.viewanswer:active,.viewchart:active,.backBtn:active,.replay:active {
  letter-spacing: 0.3em;
}
.resultArea {
  display: none;
  width: 70%;
  margin: auto;
  padding: 10px;
}
.chartBox {
  width: 60%;
  margin: auto;
}
.resultPage1 {
  text-align: center;
}
.resultBox h1 {}
.briefchart {
  text-align: center;
}
.resultPage2,.resultPage3 {
  display: none;
  text-align: center;
}
.allAnswerBox {
  width: 100%;
  margin: 0;
  position: relative;
}
._resultboard {
  position: relative;
  display: inline-block;
  width: 40%;
  padding: 2%;
  height: 190px;
  vertical-align: top;
  border-bottom: 0.6px solid rgba(255,255,0.2);
  text-align: left;
  margin-bottom: 4px;
}
._resultboard:nth-child(even) {
  margin-left: 5px;
  border-left: 0.6px solid rgba(255,0.2);
}
._resultboard:nth-last-child(2),._resultboard:nth-last-child(1) {
  border-bottom: 0px;
}
._header {
  font-weight: bold;
  margin-bottom: 8px;
  height: 90px;
}
._yourans,._correct {
  margin-bottom: 8px;
  position: relative;
  line-height: 2;
  padding: 5px;
}
._correct {
  background: #968089;
}
.h-correct {
  background: #968089;
}
.h-correct:after,._correct:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00c";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #2dceb1;
}
.h-incorrect {
  background: #ab4e6b;
}
.h-incorrect:after {
  line-height: 1.4;
  position: absolute;
  z-index: 499;
  font-family: 'FontAwesome';
  content: "\f00d";
  bottom: 0;
  right: 7px;
  font-size: 1.9em;
  color: #ff383e;
}
.resultPage3 h1,.resultPage1 h1,.resultPage2 h1 {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1.3px solid rgba(21,63,101,0.9);
  color: #3a5336;
}
.my-progress {
  position: relative;
  display: block;
  margin: 3rem auto 0rem;
  width: 100%;
  max-width: 950px;
}
progress {
  display: block;
  position: relative;
  top: -0.5px;
  left: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #f1f2ec;
  width: 100%;
  height: 2.5px;
  background: none;
  -webkit-transition: 1s;
  transition: 1s;
  will-change: contents;
}
progress::-webkit-progress-bar {
  background-color: #f1f2ec;
}
progress::-webkit-progress-value {
  background-color: #153f65;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
  position: absolute;
  top: -6px;
  left: 0;
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #7aa4a9;
  border: 3px solid #f1f2ec;
  border-radius: 50%;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
  will-change: transform;
}
.my-progress-indicator.progress_1 {
  left: 0;
}
.my-progress-indicator.progress_2 {
  left: 9%;
}
.my-progress-indicator.active {
  -webkit-animation: bounce .5s forwards;
  animation: bounce .5s forwards;
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
  border-color: #153f65;
}
.animation-container {
  position: relative;
  width: 100%;
  -webkit-transition: .3s;
  transition: .3s;
  will-change: padding;
  overflow: hidden;
}
.form-step {
  position: absolute;
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  will-change: transform,opacity;
}
.form-step.leaving {
  -webkit-animation: left-and-out .5s forwards;
  animation: left-and-out .5s forwards;
}
.form-step.waiting {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
.form-step.coming {
  -webkit-animation: right-and-in .5s forwards;
  animation: right-and-in .5s forwards;
}
@-webkit-keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }
}
@keyframes left-and-out {
  100% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }
}
@-webkit-keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes right-and-in {
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounce {
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0);
  border: 0;
}
.hidden {
  display: none;
}
ul {
  list-style-type: none;
  width: 220px;
  margin: auto;
  text-align: left;
}
li {
  position: relative;
  padding: 10px;
  padding-left: 40px;
  height: 30px;
}
label {
  color: #fff;
}
label:before {
  content: "";
  width: 15px;
  height: 15px;
  background: #fff;
  position: absolute;
  left: 7px;
  top: calc(50% - 13px);
  box-sizing: border-box;
  border-radius: 50%;
}
input[type="radio"] {
  opacity: 0;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 30px;
  position: absolute;
  left: 0;
  top: calc(50% - 15px);
  cursor: pointer;
}
.bullet {
  position: relative;
  width: 25px;
  height: 25px;
  left: -3px;
  top: 2px;
  border: 5px solid #fff;
  opacity: 0;
  border-radius: 50%;
}
input[type="radio"]:checked~.bullet {
  position: absolute;
  opacity: 1;
  animation-name: explode;
  animation-duration: 0.350s;
}
.line {
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #fff;
  opacity: 0;
}
.line.zero {
  left: 11px;
  top: -21px;
  transform: translateY(20px);
  width: 2px;
  height: 10px;
}
.line.one {
  right: -7px;
  top: -11px;
  transform: rotate(-55deg) translate(-9px);
}
.line.two {
  right: -20px;
  top: 11px;
  transform: translate(-9px);
}
.line.three {
  right: -8px;
  top: 35px;
  transform: rotate(55deg) translate(-9px);
}
.line.four {
  left: -8px;
  top: -11px;
  transform: rotate(55deg) translate(9px);
}
.line.five {
  left: -20px;
  top: 11px;
  transform: translate(9px);
}
.line.six {
  left: -8px;
  top: 35px;
  transform: rotate(-55deg) translate(9px);
}
.line.seven {
  left: 11px;
  bottom: -21px;
  transform: translateY(-20px);
  width: 2px;
  height: 10px;
}
input[type="radio"]:checked~.bullet .line.zero {
  animation-name: drop-zero;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.one {
  animation-name: drop-one;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.two {
  animation-name: drop-two;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.three {
  animation-name: drop-three;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.four {
  animation-name: drop-four;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.five {
  animation-name: drop-five;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.six {
  animation-name: drop-six;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.seven {
  animation-name: drop-seven;
  animation-delay: 0.100s;
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
}
@keyframes explode {
  0% {
    opacity: 0;
    transform: scale(10);
  }
  
  60% {
    opacity: 1;
    transform: scale(0.5);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes drop-zero {
  0% {
    opacity: 0;
    transform: translateY(20px);
    height: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: translateY(-2px);
    height: 0px;
    opacity: 0;
  }
}
@keyframes drop-one {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(-20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(-55deg) translate(9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-two {
  0% {
    opacity: 0;
    transform: translate(-20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: translate(9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-three {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(-20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(55deg) translate(9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-four {
  0% {
    opacity: 0;
    transform: rotate(55deg) translate(20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(55deg) translate(-9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-five {
  0% {
    opacity: 0;
    transform: translate(20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: translate(-9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-six {
  0% {
    opacity: 0;
    transform: rotate(-55deg) translate(20px);
    width: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: rotate(-55deg) translate(-9px);
    width: 0px;
    opacity: 0;
  }
}
@keyframes drop-seven {
  0% {
    opacity: 0;
    transform: translateY(-20px);
    height: 10px;
  }
  
  20% {
    opacity: 1;
  }
  
  100% {
    transform: translateY(2px);
    height: 0px;
    opacity: 0;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quizArea">
  <div class="multipleChoiceQues">
    <h1 class="mc_quiz">
      Quiz
    </h1>
    <div class="my-progress">
      <progress class="my-progress-bar" min="0" max="100" value="0" step="9" aria-labelledby="my-progress-completion"></progress>
      <p id="my-progress-completion" class="js-my-progress-completion sr-only" aria-live="polite">0% complete</p>
    </div>
    <div class="quizBox">
      <div class="question"> </div>
      <div class="answerOptions"></div>
      <div class="buttonArea">
        <button id="next" class="hidden">Next</button>
        <button id="submit" class="hidden">Submit</button>
      </div>
    </div>
  </div>
  <div class="resultArea">
    <div class="resultPage1">
      <div class="resultBox">
        <h1>Result Summary</h1>
      </div>
      <div class="briefchart">
        <svg height="300" width="300" id="_cir_progress">
          <g>
            <rect x="0" y="1" width="30" height="15"  fill="#ab4e6b" />
            <text x="32" y="14" font-size="14"  class="_text_incor">Incorrect : 12 </text>
          </g>
          <g>
            <rect x="160" y="1" width="30" height="15"  fill="#968089" />
            <text x="192" y="14" font-size="14" class="_text_cor">Correct : 12</text>
         </g>          
          <circle class="_cir_P_x" cx="150" cy="150" r="120" stroke="#ab4e6b" stroke-width="20" fill="none" onmouseover="evt.target.setAttribute('stroke','rgba(171,78,107,0.7)');" onmouseout="evt.target.setAttribute('stroke','#ab4e6b');"></circle>

          <circle class="_cir_P_y" cx="150" cy="150" r="120" stroke="#968089" stroke-width="20"  stroke-dasharray="0,1000" fill="none"  onmouseover="evt.target.setAttribute('stroke','rgba(150,128,137,'#968089');"></circle>
          <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" class="_cir_Per">0%</text>
          </svg>
      </div>

      <div class="resultBtns">
        <button class="viewanswer">View Answers</button>
        <button class="viewchart">View Chart</button>
        <button class="replay"><i class="fa fa-repeat" style="font-size:1em;"></i> <br/>Replay</button>
      </div>
    </div>

    <div class="resultPage2">
      <h1>Your Result</h1>
      <div class="chartBox">
        <canvas id="myChart" width="400" height="400"></canvas>
      </div>
      <button class="backBtn">Back</button>
    </div>

    <div class="resultPage3">
      <h1>Your Answers</h1>
      <div class="allAnswerBox">

      </div>
      <button class="backBtn">Back</button>
    </div>

  </div>
</div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot