Como fazer uma página de quis(Perguntas e Respostas)?!

Anonn · 27 de junho de 2017

Tenho a seguinte tabela no banco:

Table: questoes
Columns:
CodigoQuestao int(11) AI PK 
Questao varchar(45) 
Justificativa varchar(45) 
AlternativaCorreta varchar(11) 
users_user_id int(11) 
Categoria varchar(45)

Table: alternativas
Columns:
CodigoAlternativa int(11) AI PK 
Alternativa varchar(45) 
questoes_CodigoQuestao int(11) 
var_alternativa varchar(1)

"var_alternativa" é a identificação da alternativa(A, B, C, D).... Tem algumas questões e alternativas já cadastradas... Grande parte já está "quase" pronto, só me falta a tela onde o usuário responde as perguntas em um formato onde aparece a pergunta e 4 opções onde só uma é a certa....

O problema é que é algo novo pra mim essa parte de "quis", então não sei como começar a fazer essa tela, as questões devem aparecer uma por vez, onde ao selecionar a resposta e apertar o botão "next" ele vá para a próxima e assim por diante. No caso da validação eu creio que consiga fazer, mas essa parte de aparecer as questões e ir para a próxima e tal me deixou estagnado nessa parte.

Obg para quem se dispor a ajudar.!

DiF · 27 de junho de 2017

@Anonimmo Olá,

Como você disse, a parte de consultar no banco de dados e mostrar em tela é bem fácil.

Para o "proximo" você pode usar um plugin jQuery chamado "steps"

http://www.jquery-steps.com/

Com ele você pode criar seu formulário de quis, que apareça novas perguntas a medida que clique no botão next.

No link acima tem vários exemplos práticos na opção "examples"

Anonn · 30 de junho de 2017

@DiF Obrigado pela resposta, gostei desse site que você passou... porém não to conseguindo aplicar no meu código... Creio que não estou conseguindo chamar o javascript, pois não aparece o conteúdo com a formatação... Pois eu costumo chamar o javascript pelo link, meu "head" está da seguinte forma:

header.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

  
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="<?php echo HOME_URI;?>/views/_css/demo.css" />
        <link rel="stylesheet" type="text/css" href="<?php echo HOME_URI;?>/views/_css/style.css" />
		<link rel="stylesheet" type="text/css" href="<?php echo HOME_URI;?>/views/_css/animate-custom.css" />	
		<link rel="stylesheet" type="text/css" href="<?php echo HOME_URI;?>/views/_css/check.css" />	



		<title><?php echo $this->title; ?></title>
  </head>

Coloquei o código em um arquivo e tentei chamar com o código :

<link rel="stylesheet" type="text/javascript" href="<?php echo HOME_URI;?>/views/_js/ex.js" />

Porém não deu certo...

Tentei da seguinte forma, colocando o script junto com a view...

<script>
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
</script>
							<div id="example-basic">
								<h3>Keyboard</h3>
								<section>
									<p>Try the keyboard navigation by clicking arrow left or right!</p>
								</section>
								<h3>Effects</h3>
								<section>
									<p>Wonderful transition effects.</p>
								</section>
								<h3>Pager</h3>
								<section>
									<p>The next and previous buttons help you to navigate through your content.</p>
								</section>
							</div>

Porém ainda não to conseguindo chamar essa formatação java.

DiF · 30 de junho de 2017

@Anonimmo Olá,

Primeiro preciso esclarecer uma coisa: Java é diferente de Javascript.

São duas linguagens completamente diferentes embora tenha a "java" ali nas duas palavras.

Sobre o código,

Neste caso, você precisa fazer com requisição assíncrona(ajax) em conjunto com o php.

Por exemplo:

$(document).ready(function(){
  
    $("#example-basic").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "slideLeft",
        autoFocus: true
    });
    
     $.ajax({
         url: 'consultaPerguntas.php',
         dataType: 'HTML' 
     }).done(function(retorno){
               $("#example-basic").html(retorno);
     
     });

});

Desta maneira, você faz uma requisição assíncrona e insere o retorno em um elemento específico.

No caso, o elemento #exemple-basic precisa estar vazio, para receber as perguntas e respostas do banco de dados.

É basicamente isso.

Anonn · 5 de julho de 2017

@DiF Esse trecho do código seria o que ? ..

  url: 'consultaPerguntas.php',
         dataType: 'HTML'

E como assim "o elemento #exemple-basic precisa estar vazio"?

DiF · 5 de julho de 2017

@Anonimmo Esta para é referente a url de qual arquivo será requisitado de forma assíncrona e o dataType é referente ao tipo de retorno que vai ser. no caso HTML.

Bem, fico no aguardo. O sistema parece simples mas não é!

Tem N maneiras de faze-lo.

Anonn · 5 de julho de 2017

@DiF Hoje andei dando uma pesquisada sobre Ajax e vi que há várias formas de usá-lo... Algo bem complexo, realmente no momento isso não consegue entrar na minha cabeça de jeito algum.

A tela que eu quero fazer é mais ou menos como esse do link :

https://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML

Em relação a sua funcionalidade.

Não haveria outra forma de fazer sem usar o Ajax no momento ?

Algo utilizando o while ou for?

DiF · 5 de julho de 2017

@Anonimmo Olá, provavelmente o w3school usa ajax para fazer isso. Note que cada vez que avançamos no quis a url não muda. Nesse caso certamente é uma requisição assíncrona.

Para contornar isso, a única gambiarra que podes fazer é ter passar os dados via GET para uma próxima página php, nesta próxima página terá mais outro FORM, que passará adiante.

46 minutos atrás, Anonimmo disse:

Algo bem complexo, realmente no momento isso não consegue entrar na minha cabeça de jeito algum.

Normalmente é esse pensamento que a maioria tem! No fim, não é algo tão complexo assim.

na verdade você só precisa entender a lógica por trás.

O ajax é uma técnica feita em javascript para permitir que possa fazer requisições de forma assíncrona, ou seja, de forma que você receba um retorno em tempo real, digamos assim.

Ele pode assustar, mas não é um bicho de sete cabeças!

Basicamente o consultaPerguntas.php que postei acima, seria responsável por fazer a consulta no seu banco de dados. E lá é montada a estrutura do quis com os radio buttons. Esta estrutura é inserida dentro do elemento div vazio.

Ou seja, é necessário que você crie um <div id="quis"> </div> sem dado algum, justamente para que o php retorne uma estrutura e insira ali.

Antes de fazer o quis, recomendo que faça testes e estudos sobre consultar um dado de um banco de dados e inserir em um determinado elemento.

Dito isso, você pode por exemplo buscar cada alternativa de resposta e construir com php. depois inserir todas dentro do elemento desejado!

Mas, ainda há outra alternativa. Usar o localstorage, que é um recurso novo do HTML 5, para armazenar as respostas... depois no final do teste fazer uma consulta ao banco e comparar as respostas.

Essa alternativa também envolve o javascript.

Aí você pode combinar o plugin jquery que foi recomendado. Nesse caso, você faz a estrutura toda no HTML direto(puxando os dados o banco para montar o quis)