Question

我对这些东西都很陌生 - 如果这是一个愚蠢的问题，请道歉。

我使用HTML，CSS，JavaScript（angular.js）和JSON数据文件创建了一个多项选择测验;我找到了一个教程。我对它的结果非常满意;但我真的需要添加让用户选择多个答案的功能，以便将问题标记为正确。如何才能做到这一点？它只是在JSON文件中标记多个正确答案的情况吗？

我感谢任何帮助！

这是我的代码：

HTML：

<!DOCTYPE HTML>

<html ng-app="myQuiz">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Your Knowledge: Saturn</title>
        <link rel="stylesheet" type="text/css" href="css/quiz.css">
    </head>
    <body>

    <div id="myQuiz" ng-controller="QuizController">
        <h1>Test your Knowledge: <span>Planets</span></h1>

        <div class="progress">
            <div class="
            {{ ($index===activeQuestion)? 'on' : 'off' }}
            {{ (myQuestion.questionState==='answered') ? 'answered':'unanswered'}}
            {{ (myQuestion.correctness==='correct') ? 'correct':'incorrect'}}
            " ng-repeat="myQuestion in myQuestions">
            </div>
        </div>


        <div class="intro {{ (activeQuestion > -1 ? 'inactive' : 'active') }}">
            <h2>Welcome</h2>
            <p>Click begin to start a topic</p>
            <p class="btn" ng-click="activeQuestion = 0">Begin</p>
        </div>


        <div class="question
        {{$index === activeQuestion ? 'active' : 'inactive'}}
        {{myQuestion.questionState === 'answered' ? 'answered' : 'unanswered'}}
        " ng-repeat="myQuestion in myQuestions">
            <p class="txt">{{myQuestion.question}}</p>
            <p class="ans"
                ng-class="{
                    image: Answer.image,
                    selected: isSelected($parent.$index,$index),
                    correct : isCorrect($parent.$index,$index)
                }"
                ng-style="{'background-image' : 'url({{Answer.image}})'}"
                ng-click="selectAnswer($parent.$index,$index)"
                ng-repeat="Answer in myQuestions[$index].answers">
                {{Answer.text}}
            </p>

            <div class="feedback">
                <p ng-show="myQuestion.correctness === 'correct'">You are <strong>correct</strong>.</p>
                <p ng-show="myQuestion.correctness === 'incorrect'">Oops! That is not correct.</p>
                <p>{{myQuestion.feedback}}</p>
                <div class="btn" ng-click="selectContinue()">Continue</div>
            </div>
        </div>


        <div class="results {{ (totalQuestions===activeQuestion) ? 'active' : 'inactive' }}">
            <h3>Results</h3>
            <p>You scored {{percentage}}% by correctly answering {{score}} of the total {{totalQuestions}} questions.</p>
            <p>Use the links below to challenge your friends.</p>
            <div class="share" ng-bind-html="createShareLinks(percentage)">
            </div>
        </div>



    </div>

    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/quiz.js"></script>

</body>
</html>

JSON（有多个问题 - 但他们都是这种格式。

[{
    "question" : "What is the name of Saturn's largest moon?",
    "answers"  : [
        {"id"  : 0, "text" : "Hercules"},
        {"id"  : 1, "text" : "Europa"},
        {"id"  : 2, "text" : "Goliath"},
        {"id"  : 3, "text" : "Zeus"},
        {"id"  : 4, "text" : "Titan"},
        {"id"  : 5, "text" : "Triton"}
    ],
    "correct"  : 4,
    "feedback" : "Though the names seem similar, Triton orbits the planet Neptune."
}]

的JavaScript

(function(){
var app = angular.module('myQuiz',[]);
app.controller('QuizController'['$scope','$http','$sce',function($scope,$http,$sce){

$scope.score = 0;
$scope.activeQuestion = -1;
$scope.activeQuestionAnswered = 0;
$scope.percentage = 0;

$http.get('quiz_data.json').then(function(quizData){
  $scope.myQuestions = quizData.data;
  $scope.totalQuestions = $scope.myQuestions.length;
});

$scope.selectAnswer = function(qIndex,aIndex){
  var questionState = $scope.myQuestions[qIndex].questionState;
  if(questionState != 'answered'){
    $scope.myQuestions[qIndex].selectedAnswer = aIndex;
    var correctAnswer = $scope.myQuestions[qIndex].correct;
    $scope.myQuestions[qIndex].correctAnswer = correctAnswer;

    if(aIndex === correctAnswer){
      $scope.myQuestions[qIndex].correctness = 'correct';
      $scope.score += 1;
    }else{
      $scope.myQuestions[qIndex].correctness = 'incorrect';
    }
    $scope.myQuestions[qIndex].questionState = 'answered';
  }
  $scope.percentage = (($scope.score / $scope.totalQuestions)*100).toFixed(1);
}

$scope.isSelected = function(qIndex, aIndex){
    return $scope.myQuestions[qIndex].selectedAnswer === aIndex;
}
$scope.isCorrect = function(qIndex, aIndex){
    return $scope.myQuestions[qIndex].correctAnswer === aIndex;
}
$scope.selectContinue = function(qIndex, aIndex){
    return $scope.activeQuestion += 1;
}

$scope.createShareLinks=function(percentage){
  var url = 'http://theoryquiz.com';

  var emailLink = '<a class="btn email" href="mailto:?subject=Try to beat my score!&amp;body= I scored '+percentage+'% on this quiz! Try to beat my score at '+url+'."> Email a Friend </a>';
  var twitterLink = '<a class="btn twitter" target="_blank" href="http://twitter.com/share?text=I scored '+percentage+' on this quiz. Try to beat my score at &amp;hashtags=TheoryQuiz&url='+url+'"> Tweet your score </a>';
  var newMarkup = emailLink + twitterLink;
  return $sce.trustAsHtml(newMarkup);}}]);})();

Answer 1

有很多方法可以实现这一目标。

我只是给你直接解决方案（因为我相信其他人会这样做），但我认为用正确的指导来自己搞清楚会有很多好处，特别是考虑到你是“新的”，你声称。 :)

以下是您可以采取的一种方法：

在内存中创建答案“存储”以检查

当有人选中复选框时，请检查该问题并对商店进行回答。
如果商店中的问题包含已选择的答案，我们会有一个胜利者。否则，我们就失败了。

示例：

var questions = {
    "question1": ["answer1", "answer2"],
    "question2": ["answer1", "answer3", "answer3"]
};

function selectAnswer(question, selectedAnswer) {
    if (questions[question]) {
        var found = false;

        questions[question].forEach(function (answer) {
            if (answer === selectedAnswer) {
                found = true;
            }
        });

        if (found) {
            // Do something
        }

        return found;
    }
}

console.log(selectAnswer("question1", "answer1")) // true
console.log(selectAnswer("question1", "answer4")) // false

现在，您可以通过使其获取答案列表的参数而不仅仅是一个答案来扩展该功能，并且您可以针对特定问题检查针对商店的所有答案。或者，您可以针对给定问题选择的每个答案使用该功能。这也有效。

那应该达到你想要的！：）

如果一切都失败了，你仍然需要帮助，请随时发表评论，我会为你的特定环境（Angular等）做些什么。

Answer 2

您应该将您的json“correct：field更改为ID数组。

如果你的问题只有一个答案，那么数组只包含一个元素。

如果您的问题有多个答案，您只需修改您的javascript函数selectAnswer（）来处理数组而不是单个值。

小提示：对于“正确性”和“已回答”字段，我会使用布尔值而不是字符串

Answer 3

解决以下问题：

  var superbag = function(sup, sub) {
sup.sort();
sub.sort();
var i, j;
for (i=0,j=0; i<sup.length && j<sub.length;) {
    if (sup[i] < sub[j]) {
        ++i;
    } else if (sup[i] == sub[j]) {
        ++i; ++j;
    } else {
        // sub[j] not in sup, so sub not subbag
        return false;
    }
}
// make sure there are no elements left in sub
return j == sub.length;}
var contains = function(needle) {
// Per spec, the way to identify NaN is that it is not equal to itself
var findNaN = needle !== needle;
var indexOf;

if(!findNaN && typeof Array.prototype.indexOf === 'function') {
    indexOf = Array.prototype.indexOf;
} else {
    indexOf = function(needle) {
        var i = -1, index = -1;

        for(i = 0; i < this.length; i++) {
            var item = this[i];

            if((findNaN && item !== item) || item === needle) {
                index = i;
                break;
            }
        }

        return index;
    };
}

return indexOf.call(this, needle) > -1;};

在多项选择测验中允许多个正确答案Angular.js＆amp; JSON

3 个答案: