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。

缺少文字游戏（填补空白）

1 个答案: