javascript - AngularJs - 我如何才能仅在答案正确时显示答案

Question

首先，我将解释到目前为止我已经实现的内容:-用户将在单选按钮中选择一个答案并点击“检查答案”，这将在第一个答案字段中显示 1. 文本正确(绿色)或不正确(红色)和 2. 在“解决方案”(答案)字段中显示实际正确答案(绿色的)。我的问题是它应该仅在答案为 Correct 时显示 solution(answer) 字段。现在，即使答案是错误的，解决方案(答案)也会出现。

请查看以下链接获取示例:- https://codepen.io/anon/pen/PRoLXo

    <div data-ng-app="epubApp">
<div data-ng-controller="checkBoxFillinCtrl" data-ng-init="checkBoxData='p50';fillinBlankData='p50';">
<div class="quiz" id="quiz_1">
    <div class="question">
        <h4>1. A 6 m ladder of 20 kg rests with upper end on a smooth wall and lower end on a rough horizontal ground as shown below. Determine the minimum coefficient of friction so that the ladder does not slip?</h4><p class="qimage"><img src="../images/22.png" alt="images"/></p>
    </div>
    <div class="quiz-object multiple-choice">
        <div class="acontainer" style="margin:0em 1px 2px 1px;border:0px solid;">

                 <div id="check_box_table" >
            <table id="q_table" class="f1" data-ng-class="{'check_box_disabled':inputDisabled}">
                <tbody >

                    <tr>

                        <td  style="border:0px solid black;"><span class="check_box cElement"  data-check-box="cb[0]" data-quest-index="0"  data-check-index="0"></span></td>
                        <td >0.14</td>
                        </tr>
                        <tr>
                        <td  style="border:0px solid black;"><span class="check_box cElement" data-check-box="cb[0]" data-quest-index="0"  data-check-index="1"></span></td>
                        <td >0.29</td>
                        </tr>
                        <tr>
                        <td  style="border:0px solid black;"><span class="check_box cElement" data-check-box="cb[0]" data-quest-index="0"  data-check-index="2"></span></td>
                        <td >0.19</td>
                        </tr>
                        <tr>
                        <td  style="border:0px solid black;"><span class="check_box cElement" data-check-box="cb[0]" data-quest-index="0"  data-check-index="3"></span></td>
                        <td >0.35</td>
                        </tr>




                </tbody>
            </table>
        </div>
            <div id="correct1" style="border:1px solid gray;border-radius:5px;color:#616360;background-color:#F3F3F3;margin:1em 0em 2em 1em;font-size:100%;padding:10px;width:80%;">
                <b>Correct or Incorrect?</b>
                <!-- Replace each correct text in the below paragraphs -->
                <td><span class="result" data-ng-class="cb[0].resultClass"></span></td>
            </div>
            <div id="feedback1" style="border:1px solid gray;border-radius:5px;color:#616360;background-color:#F3F3F3;margin:0em 0em 2em 1em;font-size:100%;padding:10px;width:80%;">
                <b>Solution</b>
                <!-- Replace each feedback in the below paragraphs -->
                <p class="feedback-text">

                </p>
                <p data-ng-show="answerVisible" class="feedback-text">
Consider the FBD of the ladder<br/>
 <br/>
A = Normal reaction at lower end<br/>
B = Normal reaction at upper end<br/>
f = frictional force acting at horizontal surface<br/>
W = weight of ladder = 20 * 10 = 200 N<br/>
Considering horizontal and vertical equilibrium<br/>
f = B<br/>
A = W <br/>
So A = 200 N<br/>
Taking moment about lower end<br/>
B * 6 * sin 60&#176; - W * 6/2 * cos 60&#176; = 0<br/>
B * 6 * &#8730;3 /2 = 200 * 3 * &#189; = 300<br/>
B * 3 * &#8730;3 = 300<br/>
B = 100/&#8730;3 = 57.74 N<br/>
f = &#181; * N = B<br/>
&#181; = coefficient of friction <br/>
N = normal reaction = A = W = 200 N<br/>
f = &#181; * 200 = 57.74<br/>
&#181; = 57.74/200 = 0.29


                </p>
                <p class="feedback-text">
                </p>
                <p class="feedback-text">

                </p>
            </div>
        </div>
    </div>
    <div class="submitcontainer">
        <p style="text-align:left;">
            <div class="submit1" style="z-index:2;">
            <!-- <button id="submitBtn" style="background-color:#4f81bd; border-radius:5px; color:white; font-size:15px; padding:8px;" type="button">Show answers</button> -->
                <button class="resetBtn check"  style="font-family: Arial, Helvetica, sans-serif;font-weight: bold;color:white;background-color:#616360;font-size:100%;padding:5px;margin-top:1em;margin-right:1em;"  data-ng-show="resetVisible" data-ng-click="onReset()">RESET</button>
            <button class="submitBtn reset" id="reset_1"  style="font-family: Arial, Helvetica, sans-serif;font-weight: bold;color:white;background-color:#616360;font-size:100%;padding:5px;margin-top:1em;margin-right:1em;"   data-ng-show="submitVisible" data-ng-click="onSubmit()">Check Answer</button>


        </div>
        </p>
    </div>

    </div>

</div>
</div>

带示例的解释会很有帮助，谢谢。

Answer 1

问题是 $scope.answerVisible = true;

您需要从 submit 中删除 $scope.answerVisible = true; 功能，因为它使你的 div 可见 每次你点击 Check Answer 按钮功能。

所以我所做的，我把它放在了正确的地方。

在 validate 函数中，您验证答案，如果答案正确，则将 $scope.answerVisible 设置为 true，否则为 false；

这里是更新的函数:

 function validate() {
  allCorrect = true;
  data.forEach(function (val, index) {
  $scope.cb[index].clickable = false;
  $scope.cb[index].showClass = [];
  var groupCheckCorrect = $scope.cb[index].checked.length ? true : false;
  if (Array.isArray(val)) {
    $scope.cb[index].checked.forEach(function (v, i) {
      if (v) {
        if (val.indexOf(i) > -1) {
          $scope.answerVisible =  true;                   
          $scope.cb[index].showClass[i] = 'correct';
        } else {
          $scope.cb[index].showClass[i] = 'wrong';
          allCorrect = false;
          groupCheckCorrect = false;
        }
      }
    });
  } else {
    $scope.cb[index].checked.forEach(function (v, i) {
      if (v) {
        if (val == i) {
          $scope.answerVisible =  true;                 
          $scope.cb[index].showClass[i] = 'correct';
        } else {
          $scope.cb[index].showClass[i] = 'wrong';
          allCorrect = false;
          groupCheckCorrect = false;
        }
      }
    });
  }

  $scope.cb[index].resultClass = groupCheckCorrect ? "all_correct" : "all_wrong";
});

/** for fill up */
$scope.inputDisabled = true;
angular.forEach(fillup_data, function (d, i) {
  if ($scope.fill[i] != undefined && d.toLowerCase() == $scope.fill[i].toLowerCase()) {
    $scope.fillResult[i] = fillup_correct;
  } else {
    $scope.fillResult[i] = fillup_wrong;
  }
});
user_fill_answer = [];
user_fillResult_answer = [];
angular.copy($scope.fill, user_fill_answer);
angular.copy($scope.fillResult, user_fillResult_answer);
/** */