Well, I'm breaking my head here, I've already sifted through the internet, but I still have not been able to resolve an issue. I'm creating a Quiz application using AngularJS, but I'm not able to create a session, or any other way to write certain input data to the bank. Can someone help me? I just need to save the selections in some session array, or send it via AJAX itself, just to save in the database.
Thank you in advance!
My base.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>varapp=angular.module('quizApp',[]);app.directive('quiz',function(quizFactory){return{restrict:'AE',scope:{},templateUrl:'questoes.php',link:function(scope,elem,attrs){scope.start=function(){scope.id=0;scope.quizOver=false;scope.inProgress=true;scope.getQuestion();};scope.reset=function(){scope.inProgress=false;scope.correct=0;scope.incorrect=0;}scope.getQuestion=function(){varq=quizFactory.getQuestion(scope.id);if(q){scope.question=q.question;scope.options=q.options;scope.answer=q.answer;scope.answerMode=true;}else{scope.quizOver=true;}};scope.checkAnswer=function(){if(!$('input[name=answer]:checked').length)return;vardataForm=[];dataForm=$('input[name=answer]:checked').val();varans=$('input[name=answer]:checked').val();if(ans==scope.options[scope.answer]){scope.correct++;scope.correctAns=true;}else{scope.correctAns=false;scope.incorrect++;}scope.answerMode=false;};scope.nextQuestion=function(){scope.id++;scope.getQuestion();}scope.reset();}}});app.factory('quizFactory',function(){varquestions=[{question:"Questão 1",
options: ["Blablabla", "Blablabla2", "Blablabla3"],
answer: 2
},
{
question: "Questão 2",
options: ["Blablabla", "Blablabla2", "Blablabla3"],
answer: 0
},
{
question: "Questão 3",
options: ["Blablabla", "Blablabla2", "Blablabla3"],
answer: 1
}
return {
getQuestion: function(id) {
if(id < questions.length) {
return questions[id];
} else {
return false;
}
}
};
});
> Meu questoes.php<div class="quiz-area" ng-show="inProgress">
<div ng-show="!quizOver">
<form ng-submit="processForm()" name="formData" id="form-questions" method="POST" action="">
<h2 id="question">{{question}}</h2>
<ul id="options">
<li ng-repeat="option in options">
<label>
<input type="radio" name="answer" value="{{option}}">
{{option}}
</label>
</li>
</ul>
<button ng-click="checkAnswer()" ng-show="answerMode">Clique para confirmar resposta!</button>
<button id="btn-submit" class="next-question hidden">Finalizar Quiz</button>
<div ng-show="!answerMode">
<button ng-click="nextQuestion()" class="next-question">Próxima pergunta >></button>
<span ng-show="correctAns">Resposta correta!</span>
<span ng-show="!correctAns">Resposta incorreta!</span>
</div>
</form>
<pre>
{{ formData }}
</pre>
</div>
<div ng-show="quizOver">
<h2>Fim do Quiz</h2>
<button ng-click="reset()">Voltar</button>
</div>
<div id="score">
Correto: {{correct}}
</div>
<div id="inscore">
Incorreto: {{incorrect}}
</div>
</div>
<div class="intro" ng-show="!inProgress">
<p>Bem vindo ao Quiz da Diversidade Bosch</p>
<button id="startQuiz" ng-click="start()">Iniciar o Quiz</button>
</div>
> Meu index.html<!DOCTYPE html>
<html ng-app="quizApp">
<head>
<meta charset="utf-8" />
<title>Diversidade Bosch</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="formController">
<div class="container">
<h1 class="title">Quiz Diversidade Bosch</h1>
<quiz/>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script><scripttype="text/javascript" src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><scriptsrc="js/base.js"></script>
</html>