在這個JavaScript測驗中擺脫檢查答案按鈕？

Question

我正在開發一個測驗，我希望這個「檢查答案」按鈕被刪除，並在點擊任何選項時必須顯示答案。

任何人都可以請幫助我如何做到這一點？

我在這裏找到了重複， Creating a JavaScript Quiz that shows answer explanation automatically 但這不是我想要做的。因爲我是堆棧溢出的新手，所以我無法評論這個問題，所以打開這個新的。

這裏的jsfiddle鏈接：http://jsfiddle.net/natmit/7Du6N/

function processQuestion(choice) { 
     if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) { 
      $('.choice').eq(choice).css({ 
       'background-color': '#84e47b' 
      }); 
      $('#explanation').html('<h5>Awesome! Right answer!</h5><br/>' + htmlEncode(quiz[currentquestion]['explanation'])); 
      score++; 
     } else { 
      $('.choice').eq(choice).css({ 
       'background-color': '#e0514e' 
      }); 
      $('#explanation').html('<h3>Oops! wrong answer</h3><br/>' + htmlEncode(quiz[currentquestion]['explanation'])); 
     } 
     currentquestion++; 
     $('#submitbutton').html('<h4>NEXT QUESTION &raquo;</h4>').on('click', function() { 
      if (currentquestion == quiz.length) { 
       endQuiz(); 
      } else { 
       $(this).text('CHECK ANSWER').css({ 
        'color': '#ffffff' 
       }).off('click'); 
       nextQuestion(); 

      } 
     }) 
    } 

Answer 1

嘗試在你的init（）函數的末尾添加$('#submitbutton').hide();。

改變你的按鈕在你setupButtons）的動作（功能有點像這樣：

 $('.choice').on('click', function() { 
     picked = $(this).attr('data-index'); 
     $('.choice').removeAttr('style').off('mouseout mouseover'); 
     $(this).css({ 
      'border-color': '#222', 
      'font-weight': 700, 
      'background-color': '#c1c1c1' 
     }); 
      processQuestion(picked); 
    }); 

在你processQuestion結束（）函數$('#submitbutton').show();再次顯示按鈕，最後再次隱藏的按鈕您nextQuestion（）函數的一端與$('#submitbutton').hide();

這裏工作小提琴：http://jsfiddle.net/6ft4sy7s/

好運:)

Answer 2

如果我理解正確的話，你需要做的就是從這個您setupButtons()函數中更改此代碼：

$('.choice').on('click', function() { 
picked = $(this).attr('data-index'); 
$('.choice').removeAttr('style').off('mouseout mouseover'); 
$(this).css({ 
    'border-color': '#222', 
    'font-weight': 700, 
    'background-color': '#c1c1c1' 
}); 
if (submt) { 
    submt = false; 
    $('#submitbutton').css({ 
    'color': '#000' 
    }).on('click', function() { 
    $('.choice').off('click'); 
    $(this).off('click'); 
    processQuestion(picked); 
    }); 
} 
}) 

到：

$('.choice').on('click', function() { 
    if (submt) { 
     submt = false; 
     picked = $(this).attr('data-index'); 
     $('.choice').removeAttr('style').off('mouseout mouseover'); 
     $(this).css({ 
      'border-color': '#222', 
      'font-weight': 700, 
      'background-color': '#c1c1c1' 
     }); 
     $('.choice').css({ 
      'cursor': 'default' 
     }); 

     processQuestion(picked); 
     $('#submitbutton').css({ 
      'color': '#000' 
     }); 
    } 
}) 

我在這裏做的所有事情都是以processQuestion()功能以外的$('#submitbutton')點擊事件，因此一旦選擇了選擇就會觸發它。

我還移動了$('.choice')單擊事件中的其餘jQuery代碼，並將其移入if (submt)條件語句中。這可以防止在選擇答案後激活答案選擇CSS。

我選擇了一個選項後，將cursor:default的CSS添加到選項中，這樣用戶很清楚他們不能再選擇它。

http://jsfiddle.net/7Du6N/326/

修訂FIDDLE：http://jsfiddle.net/7Du6N/328/ *過程中接聽按鈕隱藏