Question

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

请查看以下链接以获取样本： - 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;

您需要从$scope.answerVisible = true;移除submit 功能，因为每次单击检查答案按钮功能时，它都会使您的 div 可见。

所以我做了什么，我把它放在了正确的位置。

在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);
/** */

}

Answer 2

首先，我会说你没有使用好的做法，因为你在前端存储答案永远不会存储这类信息，好像用户甚至很少技术他/她会暴露答案和做出的黑客攻击系统不安全

如果选项中有更改，请进行API调用检查并在答案正确时验证答案如果错误，请使用ng-class添加类，反之亦然。

所以，采用这种方法，因为它不会向用户公开你的正确答案，如果你卡在某处，请发布

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

2 个答案: