缺少文字遊戲（填隙）

Question

我想提出一個小的文字遊戲，那裏有一所缺少的單詞，如果你在輸入欄填寫正確答案它變綠

我想一個功能添加到這個代碼，但我不知道我怎麼 要那麼如果你把一個錯誤的答案則會變成紅色

它只是增加了你的分數，如果你把正確的答案變綠分鐘進行編輯

我知道答案是在js文件結束時將它變成綠色，如果正確

這是HTML

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'> </script> 
      <script type="text/javascript"> 
      $(document).ready(function(){ 
      $("input").not($(":button")).keypress(function (evt) { 
      if (evt.keyCode == 13) { 
       iname = $(this).val(); 
       if (iname !== 'Submit'){ 
       var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select'); 
       var index = fields.index(this); 
       if (index > -1 && (index + 1) < fields.length) { 
       fields.eq(index + 1).focus(); 
       } 
       return false 
      } 
      } 
     }); 
      });</script> 


     <script type="text/javascript" src="prolinguis-gap-filler.js"></script> 

<div style="font-family:Helvetica; font-size: 18px; vertical-align:bottom; color:#3e2e41; margin:16px 0;"> Score: <label id="label_score">0%</label></div> 

       <form class="game-form" style="padding: 0px; width: 100%; margin: 10px auto;" > 

        <!-- //////////////////////////////////////////////////////////////////////////////////////// --> 

        <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;"> 

        <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 1</p> 
        <p>Where is Stephen from? <input TYPE="text" id="ctr1" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p> 
        </div> 

        <!-- //////////////////////////////////////////////////////////////////////////////////////// --> 

        <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;"> 

        <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 2</p> 
        <p>If someone asks you, what’s cooking? You shouldn’t answer with: <input TYPE="text" id="ctr2" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p> 
        </div> 

        <!-- //////////////////////////////////////////////////////////////////////////////////////// --> 

        <div class="game-hold" style=" width: 100%; text-align: left; display: inline-block;"> 

        <p style="font-size: 14px; font-weight: bold; margin: 5px 0; color: #333333;">Question 3</p> 
        <p>Instead, just say <input TYPE="text" id="ctr3" onBlur="validate(this.value, this.id)" style="text-transform: uppercase; font-family:Helvetica; font-size: 10px; width:150px; height:18px; text-align: left; color:#000000;"></input></p> 
        </div> 

       </form> 

，並在js文件我有這個

<script> 
      var ctr = 0 
      var score_ctr = 0 
      function validate(value, id) { 
      if (id =='ctr1' && (value.toUpperCase()=="UNITED STATES" || value.toUpperCase()=="USA" || value.toUpperCase()=="AMERICA")) { 
       ctr = ctr + 1; 
       correct_answer(id); 
       document.getElementById(id).value="UNITED STATES"; 
      } 
      if (id =='ctr2' && (value.toUpperCase()=="GOOD")) { 
       ctr = ctr + 1; 
       correct_answer(id); 
       document.getElementById(id).value="GOOD"; 
      } 
      if (id =='ctr3' && (value.toUpperCase()=="NOTHING MUCH" || value.toUpperCase()=="NOT MUCH")) { 
       ctr = ctr + 1; 
       correct_answer(id); 
       document.getElementById(id).value="NOTHING MUCH"; 
      } 


      } 
      function correct_answer (id) { 
      score_ctr = (ctr * 100)/3 
      document.getElementById('label_score').innerHTML = score_ctr.toFixed(0) + '%' 
      document.getElementById(id).disabled=true; 
      document.getElementById(id).style.backgroundColor = '#c1d82f' 
      document.getElementById(id).style.cursor="default" 

      } 
    </script> 

Answer 1

更改validate(value, id)以下幾點：

function validate(value, id) { 
    if (id == 'ctr1' && (value.toUpperCase() == "UNITED STATES" || value.toUpperCase() == "USA" || value.toUpperCase() == "AMERICA")) { 
     ctr = ctr + 1; 
     correct_answer(id); 
     document.getElementById(id).value = "UNITED STATES"; 
    } 
    else if (id == 'ctr2' && (value.toUpperCase() == "GOOD")) { 
     ctr = ctr + 1; 
     correct_answer(id); 
     document.getElementById(id).value = "GOOD"; 
    } 
    else if (id == 'ctr3' && (value.toUpperCase() == "NOTHING MUCH" || value.toUpperCase() == "NOT MUCH")) { 
     ctr = ctr + 1; 
     correct_answer(id); 
     document.getElementById(id).value = "NOTHING MUCH"; 
    } 
    else 
    { 
     document.getElementById(id).style.backgroundColor = '#ff0000'; 
     document.getElementById(id).style.cursor = "default"; 
    } 

這將檢查並覈對所有不同的輸入字段，如果找不到正確的答案，則會將最後模糊字段的背景設置爲紅色。

只是一個提示，如果你想清理一下你的代碼，考慮使用switch語句來確定你正在檢查哪個id。