0

Galera, estou quebrando a cabeça aqui, já peneirei a internet inteira, mas ainda não consegui resolver uma questão. Estou criando uma aplicação de Quiz usando AngularJS, porém, não estou conseguindo criar uma session, ou qualquer outra forma para gravar determinados dados dos inputs no banco. Alguém pode me ajudar? Só preciso salvar as seleções em algum array de sessão, ou enviar por AJAX mesmo, só pra salvar no banco.

Desde já agradeço!

Meu base.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
var app = 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() {
				var q = 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;

				var dataForm = [];
				dataForm = $('input[name=answer]:checked').val();

				var ans = $('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() {
	var questions = [
		{
			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>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script src="js/base.js"></script>


</html>

1 Resposta 1

1

Se eu percebi bem, quando estás a ver se a resposta está certa ou errada, deves fazer um push: ou com a resposta do utilizador, ou com um valor booleano; Conforme estejas a pensar enviar os dados ou usa-los na aplicação mais tarde;

// depois da declaração do controlador 
scope.answers = [];

// ...
var ans = $('input[name=answer]:checked').val();
scope.correctAns = ans === scope.options[scope.answer];
scope.answers.push(scope.correctAns); 
scope.correctAns ? scope.correct++ : scope.incorrect++;

// ...

depois podes fazer uma função tipo

scope.saveAnswers = function () { 
    $http.post('url.com/file.php',{answers: scope.answers})
        .then(function success() {}, function failure(){});
}

e chama-la depois num <button ng-click="saveAnswers()"></button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .