Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Anonimmo

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

Recommended Posts

Anonimmo    0

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.!

Compartilhar este post


Link para o post
Compartilhar em outros sites
DiF    2.723

@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"

Compartilhar este post


Link para o post
Compartilhar em outros sites
Anonimmo    0
  • Autor do tópico
  • @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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.723

    @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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    Anonimmo    0
  • Autor do tópico
  • @DiF Esse trecho do código seria o que ? .. 

     

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

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

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.723
    Postado (editado)

    @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.

     

    Editado por DiF

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    Anonimmo    0
  • Autor do tópico
  • @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?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.723
    Postado (editado)

    @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)

     

     

     

    Editado por DiF

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×