Same JavaScript file for multiple JSON files, but selecting which JSON data is shown in a specific part of the site

58
April 16, 2018, at 07:15 AM

I am trying to set-up a website which would contain multiple quizzes - all on a different topic but all in the same multiple-choice format. What I would like to do is have each topic placed in different parts of the website (something I am doing with HTML/CSS).

I have the questions and answers data of each topic saved in individual JSON files, and the JavaScript code below is the quiz logic (which works) which I would like to apply to all the JSON files.

However, I cannot find a solution which would allow me to have the same JavaScript code read multiple JSON files and then allow me to select 'place' the quiz wherever I want on the website. What I am after is the re-usability of the code to read multiple JSON files but then allow me to choose which data from a particular JSON file should be shown in a particular place.

Here is the JavaScript:

(function(){
var app = angular.module('myQuiz',[]);
app.controller('QuizControllerAttitude',['$scope','$http','$sce',function($scope,$http,$sce){
$scope.score = 0;
$scope.activeQuestion = -1;
$scope.activeQuestionAnswered = 0;
$scope.percentage = 0;
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;};
$http.get('attitude.json').then(function(quizData){
  $scope.myQuestions = quizData.data;
  $scope.totalQuestions = $scope.myQuestions.length;
});
 $scope.selectAnswer = function(qIndex,aIndex){
  var questionState = $scope.myQuestions[qIndex].questionState;
   $scope.myQuestions[qIndex].selectedAnswer = aIndex;
  if(questionState != 'answered' ){
  $scope.myQuestions[qIndex].allAns.push(aIndex);
    if($scope.myQuestions[qIndex].allAns.length == $scope.myQuestions[qIndex].correct.length) {
    var correctAnswer = $scope.myQuestions[qIndex].correct;
    $scope.myQuestions[qIndex].correctAnswer = correctAnswer;
    if(superbag($scope.myQuestions[qIndex].allAns,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 contains.call($scope.myQuestions[qIndex].allAns, aIndex);
}
$scope.isCorrect = function(qIndex, aIndex){
    return contains.call($scope.myQuestions[qIndex].correct, aIndex) &&  $scope.myQuestions[qIndex].allAns.length == $scope.myQuestions[qIndex].correct.length;
}
$scope.isInCorrect = function(qIndex, aIndex){
    return !contains.call($scope.myQuestions[qIndex].correct, aIndex) &&  $scope.myQuestions[qIndex].allAns.length == $scope.myQuestions[qIndex].correct.length;
}
$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);
}
}]);
})();

And here is my HTML to show the data from one JSON file (my understanding is that I'd simply need to copy/paste this in the different sections of the site - but I pasted it here just in case):

<div id="myQuiz" ng-controller="QuizController">
            <h1>Test your Knowledge: <span>Alertness</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}} <img ng-src="{{myQuestion.qimage}}"></p>
                <p class="ans"
                    ng-class="{
                        image: Answer.image,
                        selected: isSelected($parent.$index,$index),
                        correct : isCorrect($parent.$index,$index),
                        incorrect : isInCorrect($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>

I've done some research on stuff but I couldn't really find anything concrete. I appreciate any form of help! Please let me know if my question needs further clarification.

READ ALSO
Intercept all outgoing requests

Intercept all outgoing requests

In short, is there any way to intercept all outgoing requests in a page in order to append an Authorization token to the header prior to sending the request? This includes all requests that are out of the control of the user (non-clickable ones) such as request...

95
Display API Data in HTML for Stock/BTC Price?

Display API Data in HTML for Stock/BTC Price?

I'm trying to display the data from this api: https://blockchaininfo/q/24hrprice and display it in an HTML file using JS under the price header for the coins

77