0

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>&nbsp;Que os jogos comecem</h2>&nbsp;
        </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>&nbsp;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>&nbsp;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>&nbsp;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>
6
  • 2
    O que você já tem pronto? A consulta? O html que vai exibir a consulta? sua pergunta, dessa forma está muito ampla.
    – mau humor
    Commented 9/01/2017 às 20:06
  • 1
    Show me whatchu got, bruh! Posta seu código aí Commented 9/01/2017 às 20:37
  • Código postado @nottherealhemingway Commented 10/01/2017 às 1:31
  • @mauhumor, código postado. Commented 10/01/2017 às 1:31
  • Você precisa aprender JQuery urgentemente @TiagoSilveira... Commented 10/01/2017 às 19:49

1 Resposta 1

1

Tem que saber JQuery. Tem que saber, minimamente, a sintaxe da linguagem (JavaScript) e da biblioteca. Você precisa saber que para referenciar um elemento, vc deve usar um seletor. Veja: $('#form') está selecionando o formulário pelo id.

No exemplo, quero enviar o form sem refresh, então primeiro usei o método preventDefault() para evitar o comportamento padrão. Assim, quando clico no botão Submit, o form não gera um request, e a página não atualiza:

$("#form").submit(function (e) {
 e.preventDefault();
});

Depois precisei enviar os dados do form via POST para o script test.resp.php, então usei o método $.post informando a url e data a enviar [ onde: $.post(url, data) referências ]:

$("#form").submit(function (e) {
 e.preventDefault();
 $.post( $("#form").attr("action"), $("#form").serialize() )
});

Se você analisar o código e buscar informações da documentação da api, vai descobrir pra que serve cada método usado no programa. Vai descobrir, por exemplo, que $("#form").serialize() passado como data está transformando os campos do $("#form") em uma string para poder submeter os dados sem refresh.

Não adianta partir para o desenvolvimento se vc não entende o que a biblioteca está fazendo.

Sugiro que vc estude o código que postei nesta resposta com a ajuda do console do navegador. Garanto que depois de aprender o que está acontecendo com este programa vc vai conseguir fazer o que quer no seu.

test.php:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <style>
            body{
                margin-top: 20px;
            }
            #callback{
                display: none;
            }
        </style>
        <script> 
            $(function () {
                //Comportamento do FORM ao ser enviado
                $("#form").submit(function (e) {
                    e.preventDefault();
                    $.post(
                        $("#form").attr("action"),
                        $("#form").serialize()
                    )
                    .done(function (resp) {
                        var obj = $.parseJSON(resp);
                        var string = '';
                        var divclass = $('#callback').attr('class');
                        $.each(obj, function(i, v) {
                            string += 'id: '+i+' email: '+v.valor+'<br>';
                        });
                        callback('success', string);
                    })
                    .fail(function (resp) {
                        callback('success', resp);
                    });
                });
            });

            //Funcao que modifica a DIV callback
            function callback(mode, string){
                var divclass = $('#callback').attr('class');
                if(mode === 'success'){
                    $('#callback').removeClass(divclass);
                    $('#callback').addClass('alert alert-success');
                    $('#callback').html(string);
                    $('#callback').show();                    
                }
                else{
                    $('#callback').removeClass(divclass);
                    $('#callback').addClass('alert alert-success');
                    $('#callback').html(string);
                    $('#callback').show();
                }
            }

        </script>
    </head>
    <body>
        <div class='container'>
            <form class="col-sm-6" id="form" action="test.resp.php">
                <div class="alert" id="callback"></div>
                <div class="form-group" id="form-group-email">
                    <label>Email address</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>          
        </div>
    </body>
</html>

test.resp.php:

<?php
//Suponha que a resposta da query seja esse array:
$resp = [
    0 => ['id'=>0,'valor'=>'Linha 1: '.$_POST['email']],
    1 => ['id'=>1,'valor'=>'Linha 2: '.$_POST['email']]
];
//Formatemos o array acima para um padrão legivel ao javascript.
//Aqui eu decidi que o php vai responder um objeto json, mas vc pode mandar
//qualquer coisa que o javascript possa manipular
echo json_encode($resp);

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 .