Doubt - Session with Angularjs + PHP

Asked

Viewed 198 times

0

Guys, I’m racking my brain here, I’ve penetrated the entire Internet, but I haven’t been able to solve a question yet. I am creating a Quiz application using Angularjs, however, I am not able to create a Session, or any other way to record certain input data in the database. Can anyone help me? I just need to save the selections in some session array, or even send them by AJAX, just to save to the bank.

Thanks in advance!

My 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>

php javascript ajax angularjs

1 answer

1

If I understand correctly, when you’re seeing if the answer is right or wrong, you should make a push: or with the user’s response, or with a boolean value; as you plan to send the data or use it in the application later;

// 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++;

// ...

then you can do a function like

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

and call her later in a <button ng-click="saveAnswers()"></button>

Browser other questions tagged php javascript ajax angularjs

You are not signed in. Login or sign up in order to post.