To make onload function in angularjs work

Question

I have a made a quiz code that displays 10 questions. I want the function to load as soon as the page loads. In javascript , it was onload, here in angular I have used angular.element(document).ready(function(){....}); after defining in the controller. It is not getting loaded. Also I want to know if my code is proper, I have used an ng-click for submit inside the controller, it worked when I did the program in javascript,not sure of angularjs. Also please check if my foreach in checkAnswer() function is proper. And if any other bug please let me know.

<html ng-app="Swabhav.Quiz">

<head>
<title>Quiz code</title>
<script src="angular.js"></script>
<style>
    h1 {
        text-align: center;
        background-color: lightcoral;
    }

    #head {
        text-decoration: underline;
        text-decoration-color: maroon;
    }

    #select1 {
        align-self: center;
        text-align: center;
        font-family: 'Trebuchet MS';
        font-size: 20px;
        color: indigo;
        margin-top: 30px;
        margin-bottom: 50px;
        padding: 30px;
    }
</style>
 </head>

 <body>

    <div ng-controller="QuizController">
    <h1>QUIZ</h1>
    <div id="head" ng-bind="head"></div>
    <div id="select1" ng-bind="selection"></div>

   </div>

 <script>


    angular.module("Swabhav.Quiz", [])
        .controller("QuizController", ["$scope", "$log", function ($scope, 
    $log) {


            angular.element(document).ready(function () {

                var choiceA, choiceB, choiceC, choiceD, answer, element, 
        correct = 0, wrong = 0;
                var index = 0, choices, choice, position = 0;

                $scope.questions = [
                    { question: "How many strokes in the Ashoka Chakra?" },
                    { question: "What is 30*2?" },
                    { question: " What is largest fish?  " },
                    { question: "What is the currency of Europe and America 
       respectively?" },
                    { question: "What is the seven wonders of the World 
     amongst these?" },
                    { question: "What is the main source of travel in 
         Mumbai?" },
                    { question: "How many continents in the World?" },
                    { question: "What  Ocean surrounds India ?" },
                    { question: "What  station does not come in Mumbai-
       Railway-Western-Line?" },
                    { question: "Who is the CEO of Google  parent company- 
         Alphabet Inc.?" }
                ];

                $scope.options =
                    [{ A: "12", B: "24", C: "32", D: "10" },
                    { A: "60", B: "50", C: "20", D: "10" },
                    { A: "Blue Whale", B: "Megaladon", C: "Hammer-head 
          shark", D: "All the sharks" },
                    { A: "Dollar and Euro", B: "Euro and Dollar", C: "Yen 
       and Rupees", D: "Rupees and Yen" },
                    { A: "Taj Mahal", B: "Great Wall Of China", C: "Victoria 
           Falls", D: "All of these" },
                    { A: "Trains", B: "Aeroplane", C: "Autorickshaw", D: 
      "Motorcycle" },
                    { A: "3", B: "4", C: "5", D: "6" },
                    { A: "Indian Ocean", B: "Pacific Ocean", C: "Atlantic 
        Ocean", D: "Arctic Ocean" },
                    { A: "Sandhurst Road", B: "Andheri", C: "Borivali", D: 
       "Naigaon" },
                    { A: "Madhuri Dixit", B: "Narendra Modi", C: "Tim Cook", 
         D: "Sundar Pichai" }

                    ]

                $scope.answers =
                    [
                        { answer: "B" },
                        { answer: "A" },
                        { answer: "B" },
                        { answer: "B" },
                        { answer: "D" },
                        { answer: "A" },
                        { answer: "C" },
                        { answer: "A" },
                        { answer: "A" },
                        { answer: "D" }
                    ]

                var row = 0;

                $scope.selectQuestion = function (index) {

                    $scope.choicesIndex = 4;

                    if (row == $scope.questions.length) {
                        alert("you have  " + correct + "  correct answers 
               and  " + wrong + "  wrong answers out of 10 !");
                        return false;
                    }
                    $scope.head = "<b>" + "Question " + ++index + " of 10" + 
                 "<b>";
                    question = $scope.questions[row];
                    choiceA = options.A[row];
                    choiceB = options.B[row];
                    choiceC = options.C[row];
                    choiceD = options.D[row];
                    answer = answers.answer[row];
                    $scope.selection = index + ".  " + question + "<br>"
                        + "<input type='radio' name='choices' value='A'>" + 
         choiceA + "<br>"
                        + "<input type='radio' name='choices' value='B'>" + 
          choiceB + "<br>"
                        + "<input type='radio'  name='choices' value='C'>" + 
         choiceC + "<br>"
                        + "<input type='radio' name='choices' value='D'>" + 
        choiceD + "<br>";
                    +"<button type='button' ng-click='checkAnswer()'> Submit 
         </button>" + "<br>"
                }

                $scope.checkAnswer = function () {
                    $scope.choices.push(choiceA);
                    $scope.choices.push(choiceB);
                    $scope.choices.push(choiceC);
                    $scope.choices.push(choiceD);

                    angular.array.forEach($scope.choices, function (value, 
    key) {
                        if ($scope.choicesIndex != 0) {
                            if 
      ($scope.choices[$scope.choicesIndex].value.checked) {
                                $scope.selectedChoice = 
     $scope.choices[$scope.choicesIndex].key;

                                $log.log("$scope.selectedChoice = " + 
       $scope.selectedChoice);
                                $scope.choicesIndex--;
                            }
                        }

                    });

                    if ($scope.selectedChoice == answer) {
                        correct++;
                    }
                    else if ($scope.selectedChoice == "" || 
          $scope.selectedChoice != answer) {
                        wrong++;
                    }

                    row++;
                    $scope.selectQuestion();
                }

            });
        }]);
   </script>

 </body>

 </html>

I would recommend going through some introductory Angular tutorials. You don't typically build the UI in the manner that you are doing here. It looks like you may be familiar with jQuery and you're trying to apply those same concepts to Angular, but that's definitely not the path you want to follow. — Lex
– Lex, Commented Mar 28, 2018 at 18:34

Nishanth · Accepted Answer · 2018-03-28 20:23:08Z

As @Arash mentioned, you are coding angularjs in a wrong way.

It will be better if you go through some angularjs kick start tuitorials.

Below is the working angularjs code

<html ng-app="Swabhav.Quiz">

<head>
  <title>Quiz code</title>
  <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <style>
    h1 {
      text-align: center;
      background-color: lightcoral;
    }
    
    #head {
      text-decoration: underline;
      text-decoration-color: maroon;
    }
    
    #select1 {
      align-self: center;
      text-align: center;
      font-family: 'Trebuchet MS';
      font-size: 20px;
      color: indigo;
      margin-top: 30px;
      margin-bottom: 50px;
      padding: 30px;
    }
    
    .mt-10{
      margin-top: 10px;
    }
  </style>
</head>

<body>

  <div ng-controller="QuizController">
    <h1>QUIZ</h1>
    <!--<div id="head" ng-bind="head"></div>
    <div id="select1" ng-bind="selection"></div>-->
      <div ng-repeat="question in questions" ng-show="currentQuestion==$index+1">
        <h3>Question {{currentQuestion}} of {{questions.length}}</h3>
        <h4>{{question.question}}</h4>
        <label ng-repeat="(key,value) in options[$index]">
          <input type="radio" ng-value="key" name="{{question.question}}" ng-model="question.selected"> {{value}}
          <br/>
        </label>
      </div>
      <input class="mt-10" type="button" value="Next" 
              ng-click="nextQuestion()" 
              ng-disabled="!(questions.length>=currentQuestion && questions[currentQuestion-1].selected)"
              ng-hide="questions.length==currentQuestion || showResult"/>
      <input class="mt-10" type="button" value="Submit" 
              ng-click="checkAnswers()" 
              ng-show="questions.length==currentQuestion"/>
      <div ng-show="showResult">you have {{correctAnswerCount}} correct answers and {{questions.length-correctAnswerCount}}  wrong answers out of {{questions.length}} !</div>
  </div>

  <script>
    angular.module("Swabhav.Quiz", [])
      .controller("QuizController", ["$scope", "$log", function($scope,
        $log) {
              $scope.questions = [{"question":"How many strokes in the Ashoka Chakra?"},{"question":"What is 30*2?"},{"question":" What is largest fish?  "},{"question":"What is the currency of Europe and America respectively ? "},{"question":"What is the seven wonders of the World amongst these ? "},{"question":"What is the main source of travel in Mumbai ? "},{"question":"How many continents in the World?"},{"question":"What  Ocean surrounds India ?"},{"question":"What  station does not come in Mumbai-Railway - Western - Line ? "},{"question":"Who is the CEO of Google  parent company-Alphabet Inc. ? "}];
              $scope.options = [{"A":"12","B":"24","C":"32","D":"10"},{"A":"60","B":"50","C":"20","D":"10"},{"A":"Blue Whale","B":"Megaladon","C":"Hammer-head  shark ","D":"All the sharks "},{"A":"Dollar and Euro","B":"Euro and Dollar","C":"Yen and Rupees ","D":"Rupees and Yen "},{"A":"Taj Mahal","B":"Great Wall Of China","C":"Victoria Falls ","D":"All of these "},{"A":"Trains","B":"Aeroplane","C":"Autorickshaw","D":"Motorcycle"},{"A":"3","B":"4","C":"5","D":"6"},{"A":"Indian Ocean","B":"Pacific Ocean","C":"Atlantic Ocean ","D":"Arctic Ocean "},{"A":"Sandhurst Road","B":"Andheri","C":"Borivali","D":"Naigaon"},{"A":"Madhuri Dixit","B":"Narendra Modi","C":"Tim Cook","D":"Sundar Pichai"}];
              $scope.answers = [{"answer":"B"},{"answer":"A"},{"answer":"B"},{"answer":"B"},{"answer":"D"},{"answer":"A"},{"answer":"C"},{"answer":"A"},{"answer":"A"},{"answer":"D"}];
              $scope.currentQuestion = 1;
              $scope.nextQuestion = function(){    
                if($scope.currentQuestion < $scope.questions.length){
                  $scope.currentQuestion++;
                }
              };
              
              $scope.correctAnswerCount = 0;
              $scope.checkAnswers = function(){
                $scope.correctAnswerCount = 0;
                angular.forEach($scope.questions, function(question, index) {
                  if(question.selected && question.selected == $scope.answers[index].answer){
                    $scope.correctAnswerCount++;
                  }
                });
                $scope.currentQuestion = undefined;
                $scope.showResult = true;
              };
      }]);
  </script>

</body>

</html>

@nishanth...what does this do --> ng-disabled="!(questions.length>=currentQuestion && questions[currentQuestion-1].selected)"
i have written expression inside the ng-disabled. So whenever the expression returns true the element will be disabled and vice versa
I also want to know, how and where are the answers saved, because previously in my code with every next button , i used to store the answers in correctanswer variable. but here the answers are being checked when i click on submit, the last button click, so i click n checkanswers() only once, so how are the remaining answers evaluated ??
Before that the ouput is as expected? If not tell me what is the expected output. Now, when we write ng-model="question.selected" it implies that we are asking the angular to save the selected checkbox value to question.selected

Collectives™ on Stack Overflow

To make onload function in angularjs work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related