Estou fazendo um jogo de perguntas e respostas, eu preciso fazer uma consulta no banco e vou pegar 4 colunas (id, pergunta, resposta e desafio) e ela vai me retornar 10, 15 ou 20 linhas, dependendo do que for escolhido pelo usuário. Feito isso, essas colunas seriam exibidas em cada DIV do meu HTML, cada vez que o usuário clicar no botão de trocar, ele vai pra próxima linha.
Eu pensei em gravar essas consultas num array e pegar via JavaScript, mas eu sinceramente não sei fazer isso. Alguém poderia me ajudar?
HTML DO INDEX(Onde são passadas as configurações do jogo):
<form id="jogo" action="dados_jogo.php" Method="POST">
<div class="input-group">
<span class="input-group-addon" id="equipe1"><img src="img/nome.ico"></span>
<input type="text" class="form-control" placeholder="Nome da primeira Equipe" aria-describedby="basic-addon1">
</div>
<br>
<div class="alert alert-danger" id="valida_equipe" role="alert">
<span class="glyphicon glyphicon-info-sign"></span> Preencha o nome da primeira equipe
</div>
<div class="input-group">
<span class="input-group-addon" id="equipe2"><img src="img/nome.ico"></span>
<input type="text" class="form-control" placeholder="Nome da Segunda Equipe" aria-describedby="basic-addon1">
</div>
<br>
<div class="valida alert alert-danger" id="valida_equipe2" role="alert">
<span class="glyphicon glyphicon-info-sign"></span> Preencha o nome da segunda Equipe
</div>
<div class="form-group">
<label for="select">Selecione a Dificuldade</label>
<select class="form-control" id="dificuldade" name="dificuldade">
<option value="1">Fácil</option>
<option value="2">Médio</option>
<option value="3">Difícil</option>
</select>
</div>
<div class="form-group">
<label for="select">Selecione o número de perguntas da rodada:</label>
<select class="form-control" id="rodada" name="rodada">
<option value="1">10</option>
<option value="2">15</option>
<option value="3">20</option>
</select>
</div>
<center>
<input type="submit" class="btn btn-primary btn-lg" id="iniciar" value="Iniciar o jogo">
<button type="button" class="btn btn-primary btn-lg" id="refresh">Nova Tentativa</button> </center><br><br>
</form>
Função que eu tô tentando desenvolver pra validar esse form e jogar para a minha action do php:
$(function () {
$('#refresh').click(function () {
window.location = window.location;
});
// Comportamento do botao de envio do FORM
$('#iniciar').click(function () {
if(validar() === true){
// Se a validacao passar, carrega os dados do FORM e envia
$.post(
$("#form_jogo").attr("action"),// Captura o ACTION do FORM
$("#form_jogo").serialize() // Captura os campos do FORM
)
// Se enviar com sucesso, retorna a resposta do PHP
.done(function () {
//Se o post para o php for com sucesso ele vai executar a merda toda
//e vai me levar pra pagina do jogo com os dados inseridos aqui no index
})
// Se o envio falhar, retorna uma msg de erro
.fail(function (resp) {
//Se der erro ele só vai mudar a classe da div e dizer que não conseguiu
$("#success").attr('class','alert alert-danger'); //Muda o CSS da DIV
$("#success").html('Não foi possível iniciar o jogo!'); //Preenche a DIV com a msg
$('#tentar').show(); //Mostra a DIV
$
});
} else {
}
});
});
// Validacao do FORM ao enviar
function validar() {
var passou = true;
if ($('#equipe').val() === "") {
$('#valida_equipe').show();
passou = false;
} else {
$('#valida_equipe').hide();
}
if ($('#equipe2').val() === "") {
$('#valida_equipe2').show();
passou = false;
} else {
$('#valida_equipe2').hide();
}
return passou;
}
Código do PHP, preciso fazer a consulta e retornar num array(OU armazenar as N Perguntas de alguma forma, para que eu possa recuperar depois.)
<?php
$equipe1 = $_POST['equipe1'];
$equipe2 = $_POST ['equipe2'];
$dificuldade = $_POST ['dificuldade'];
$rodada = $_POST ['rodada'];
switch ($dificuldade) {
case '1':
$dificuldade = "Facil";
break;
case '2':
$dificuldade = "Medio";
break;
case '3':
$dificuldade = "Dificil";
break;
}
switch ($rodada) {
case '1':
$rodada = "10";
break;
case '2':
$rodada = "15";
break;
case '3':
$rodada = "20";
break;
try{
$conexao = new PDO ("mysql:host=localhost; dbname=teocratico; charset=utf8","root","");
} catch (PDOException $erro){
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
}
//AGORA EU PRECISO FAZER A CONSULTA E ARMAZENA-LA NUM ARRAY PARA PASSAR AS INFORMAÇÕES PARA OUTRA PAG.
}
?>
HTML PARA ONDE VÃO AS INFORMAÇÕES PREENCHIDAS NO INDEX E ONDE VÃO APARECER OS CAMPOS SELECIONADOS:
<div class="container">
<div class="row">
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header text-center">
<h2><span class="glyphicon glyphicon-th"></span> Que os jogos comecem</h2>
</div>
</div>
</div>
<div class="row">
<div id="pergunta_jogo" class="col-md-6 col-md-offset-3">
<div class="alert alert-info">
<!--ID da pergunta!--><h3>(XXXXXX)</h3>
<h2><span class="glyphicon glyphicon-question-sign"></span> Aqui vão aparecer as perguntas</h2>
</div>
</div>
</div>
<div class="row">
<div id="resposta_jogo" class="col-md-6 col-md-offset-3">
<div class="alert alert-success">
<h2><span class="glyphicon glyphicon-ok"></span> Aqui vai aparecer a resposta</h2>
</div>
</div>
</div>
<div class="row">
<div id ="desafio_jogo"class="col-md-6 col-md-offset-3">
<div class="alert alert-danger">
<h2><span class="glyphicon glyphicon-remove "></span> Aqui vai aparecer o desafio</h2>
</div>
</div>
</div>
</div><br />
<div class="container"><!--Ajustar a posição com media query depois!-->
<div class="row">
<div class="col-md-6 ">
<div class="page-header"><!--Nome da equipe e pontos!-->
<!--Nome da equipe e pontos!--><h3>Nome equipe1 <span id ="ponto1"class="label label-info">X</span></h3>
</div>
<input type="button" class="btn btn-danger" role="button" value="Passar" id="passar1" />
<input type="button" class="btn btn-success" role="button" value="Acertar" id="acertar1" />
</div>
</div>
<div class="row">
<div class="col-md-6 text-right ">
<div class="page-header" id="equipe2">
<!--Nome da equipe e pontos!--> <h3>Nome equipe2 <span id ="ponto2" class="label label-info">X</span></h3>
</div>
<input type="button" class="btn btn-danger" role="button" value="Passar" id="passar2" />
<input type="button" class="btn btn-success" role="button" value="Acertar" id="acertar2" />
</div>
</div>
</div>
JQuery
urgentemente @TiagoSilveira...