2016-07-20 48 views
1

我正在嘗試做一個簡單的測驗。 到目前爲止,我已經構建了隨機調用可能的問題數組的代碼。現在我想讓用戶提交選中的收件箱,並確定提交的選項是否正確。如何檢查提交的單選按鈕是否包含正確的答案

我想檢查一下,我需要將提交的選項與數據集中的「正確」答案進行比較。在數據集(字典)中,我有「類別」,「不正確」,「正確」等。因此,只有當提交選項等於「正確」句子時,用戶纔會收到消息說'正確答案'。

(function(angular) { 
 

 
    'use strict'; 
 

 
    angular.module('demo', []) 
 
    .controller('repeatController', function($scope) { 
 
     $scope.questions = { 
 
     "0": { 
 
      "Category": "Commas", 
 
      "Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.ANSWER", 
 
      "Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"", 
 
      "Incorrect": [ 
 
      "\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"", 
 
      "Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.", 
 
      "Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)." 
 
      ], 
 
      "Question": "Fix the comma splice.", 
 
      "Rule": "comma splice\n" 
 
     }, 
 

 

 
     "1": { 
 
      "Category": "Commas", 
 
      "Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.", 
 
      "Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"", 
 
      "Incorrect": [ 
 
      "Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.", 
 
      "\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"", 
 
      "\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\"" 
 
      ], 
 
      "Question": "Fix the comma splice.", 
 
      "Rule": "comma splice\n" 
 
     } 
 
     }; 
 

 
     function sort(array) { 
 
     return array.sort(function() { 
 
      return .5 - Math.random(); 
 
     }); 
 
     } 
 

 
     <!-- add correct answer to incorrect answer array and srot it randomly.--> 
 
     function random() { 
 
     for (var key in $scope.questions) { 
 
      $scope.questions[key].Incorrect.push($scope.questions[key].Correct); 
 
      $scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect); 
 
     } 
 
     } 
 

 
     random(); 
 
    }); 
 
})(angular); 
 

 
function myFunction() { 
 
    var x = document.createElement("BUTTON"); 
 
    var t = document.createTextNode("Click me"); 
 
    x.appendChild(t); 
 
    document.body.appendChild(x); 
 
}
<!DOCTYPE html> 
 
<html ng-app="demo"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="repeatController"> 
 

 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 

 

 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
\t \t \t <span class="icon-bar"></span>      
 
\t \t </button> 
 
     </div> 
 
     <div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 

 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="About_us.html"><span class="glyphicon glyphicon-check"></span> ABOUT US</a></li> 
 
      <li><a href="Contact_Info.html"><span class="glyphicon glyphicon-envelope"></span>CONTACT INFO</a></li> 
 
      </ul> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <form ng-repeat="question in questions"> 
 
    <div class="col-md-12"> 
 
     <div class="well"><b> QUESTION: {{question.Question}}</b> 
 
     <br> Category: {{question.Category}} </div> 
 
     <div class="radio" ng-repeat="incorrect_answer in question.Incorrect"> 
 
     <label> 
 
      <input type="radio" name="radio{{$parent.$index}}" value="{{incorrect_answer}}"> {{incorrect_answer}} 
 
     </label> 
 
     </div> 
 
     <!-- 
 
     <div class="form-group"> 
 
     <label class="radio-inline"> 
 
      <input type="radio"> {{question.Correct}} 
 
     </label> 
 
     </div> 
 
--> 
 
     <div class="form-group" onsubmit="TestFunction()"> 
 
     <input class="btn btn-primary" type="submit" value="Submit"> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

回答

0

首先,你需要在你的radio button使用ng-model,那麼你可以像下面的檢查使用ng-submit如果在index選擇按鈕等於正確答案,簡單:

(function(angular) { 
 
    'use strict'; 
 
    angular 
 
    .module('demo', []) 
 
    .controller('repeatController', repeatController); 
 

 
    function repeatController($scope) { 
 
    $scope.radio = []; 
 
    $scope.message = []; 
 

 
    $scope.questions = { 
 
     "0": { 
 
     "Category": "Commas", 
 
     "Correct": "Shirley Chisholm was the first major-party candidate to run for President in a major party. She ran as a Democrat.ANSWER", 
 
     "Given_sen": "\"Shirley Chisholm was the first major party candidate to run for President in a major party, she ran as a Democrat.\"", 
 
     "Incorrect": [ 
 
      "\"Shirley Chisholm, the first major-party candidate to run for President in a major party, she ran as a Democrat.\"", 
 
      "Shirley Chisholm was the first major-party candidate to run for President in a major party: she ran as a Democrat.", 
 
      "Shirley Chisholm was the first major-party candidate to run for President in a major party (she ran as a Democrat)." 
 
     ], 
 
     "Question": "Fix the comma splice.", 
 
     "Rule": "comma splice\n" 
 
     }, 
 

 

 
     "1": { 
 
     "Category": "Commas", 
 
     "Correct": "Hattie McDaniel was the first African-American to win an Oscar. She won for her performance in Gone with the Wind.", 
 
     "Given_sen": "\"Hattie McDaniel was the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"", 
 
     "Incorrect": [ 
 
      "Hattie McDaniel was the first African-American to win an Oscar: she won for her performance in Gone with the Wind.", 
 
      "\"Hattie McDaniel, the first African-American to win an Oscar, she won for her performance in Gone with the Wind.\"", 
 
      "\"Hattie McDaniel was the first African-American to win an Oscar, for her performance in Gone with the Wind.\"" 
 
     ], 
 
     "Question": "Fix the comma splice.", 
 
     "Rule": "comma splice\n" 
 
     } 
 
    }; 
 

 
    function sort(array) { 
 
     return array.sort(function() { 
 
     return .5 - Math.random(); 
 
     }); 
 
    } 
 

 
    function random() { 
 
     for (var key in $scope.questions) { 
 
     $scope.questions[key].Incorrect.push($scope.questions[key].Correct); 
 
     $scope.questions[key].Incorrect = sort($scope.questions[key].Incorrect); 
 
     } 
 
    } 
 

 
    random(); 
 

 
    $scope.submit = function(index) { 
 
     if ($scope.questions[index].Correct == $scope.radio.selected[index]) { 
 
     $scope.message[index] = "Correct"; 
 
     } else { 
 
     $scope.message[index] = "Incorrect"; 
 
     } 
 
    } 
 
    } 
 
})(angular);
<!DOCTYPE html> 
 
<html ng-app="demo"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> 
 
</head> 
 

 
<body ng-controller="repeatController"> 
 
    <nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="About_us.html"><span class="glyphicon glyphicon-check"></span> ABOUT US</a></li> 
 
      <li><a href="Contact_Info.html"><span class="glyphicon glyphicon-envelope"></span>CONTACT INFO</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <form name="form" novalidate ng-repeat="question in questions" ng-submit="submit($index)"> 
 
    <div class="col-md-12"> 
 
     <div class="well"><b> QUESTION: {{question.Question}}</b> 
 
     <br> Category: {{question.Category}} </div> 
 
     <div class="radio" ng-repeat="incorrect_answer in question.Incorrect"> 
 
     <label> 
 
      <input type="radio" ng-model="radio.selected[$parent.$index]" ng-value="incorrect_answer" name="radio{{$parent.$index}}"> {{incorrect_answer}} 
 
     </label> 
 
     </div> 
 
     <div class="form-group"> 
 
     <input class="btn btn-primary" type="submit" value="Submit"> 
 
     <span ng-class="{ 'text-success': message[$index] == 'Correct', 'text-danger': message[$index] == 'Incorrect' }" ng-if="message[$index]" ng-bind="message[$index]"></span> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

+0

非常感謝你真的很有幫助。順便一提。如果我想一次只看到一個問題,我應該添加什麼。假設我有100個問題集,並且用戶一次只能查看其中的一個。 也許我需要正確使用ng-hide和ng-show。或者在提交一個問題後需要創建一個變量並將其增加。 –

+0

我從來沒有見過 –

+0

很高興幫助:)首先,你應該從你的表格中刪除'ngRepeat' ..這樣你就可以在你的'ngSubmit'函數中增加一個變量並將currentindex傳遞給你的視圖。 。 你懂了嗎?另外我建議你把它放在你的'button'中:'ng-disabled =「!radio.selected [$ index]」'。 – developer033

0

你可以用myElement.getAttribute('value')檢查值屬性。所以:

var correctAnswer = 'apples'; 

var myRadio = document.getElementById('myRadio'); 

var isCorrect = myRadio.getAttribute('value') === correctAnswer; 

console.log('is correct? ' + isCorrect); 

你也可以抓住所有的單選按鈕的名稱相同的屬性值,然後遍歷他們,看着他們checked財產,(如果選中)打破循環,並返回該電臺的value

+0

這不是做東西的角度方式.. – developer033

+0

啊,公平點。問題中的措辭甚至沒有提到Angular,所以我沒有考慮這一點。 –

+0

確實如此,但它被標記爲'angularJs',他清楚地使用了..也不是批評,只是一個觀點。 – developer033

相關問題