Como Criar um Quiz Online com PHP e Timer
Os questionários online são uma forma popular de testar seus conhecimentos, habilidades ou personalidade em vários tópicos. Eles podem ser usados para fins de educação, entretenimento ou marketing. Os questionários on-line geralmente consistem em perguntas de múltipla escolha com diferentes opções, um cronômetro que limita o tempo para cada pergunta ou para o questionário inteiro e uma pontuação que mostra como você se saiu.
Neste tutorial, você aprenderá como criar seu próprio sistema de quiz online com PHP e MySQL. Você usará PHP para escrever scripts que interagem com o banco de dados e exibem as páginas do questionário. Você usará o MySQL para armazenar os dados do questionário, como perguntas, opções, respostas e pontuações. Você usará HTML e CSS para criar e estilizar as páginas do questionário. Você também aprenderá como usar alguns recursos básicos do PHP, como classes, funções, sessões, formulários, etc.
php code for online quiz with timer free download
Ao final deste tutorial, você será capaz de criar um sistema de questionário online com os seguintes recursos:
Um banco de dados que armazena todos os dados do questionário
Um arquivo de configuração que se conecta ao banco de dados
Uma classe que contém métodos para consultar e manipular os dados do questionário
Uma página de questionário que exibe uma pergunta por vez com quatro opções
Um cronômetro que faz contagem regressiva de 10 segundos para cada pergunta
Uma página de resultados que calcula e exibe a pontuação e o feedback
Uma página de índice que exibe as instruções do questionário e inicia o questionário
Uma folha de estilo que estiliza as páginas do questionário com CSS
Configurando o banco de dados
A primeira etapa é criar um banco de dados e tabelas para armazenar os dados do questionário. Você pode usar qualquer ferramenta de gerenciamento de banco de dados, como phpMyAdmin, para criar e gerenciar seu banco de dados. Neste tutorial, usaremos o phpMyAdmin como exemplo.
Para criar um banco de dados, siga estas etapas:
Abra o phpMyAdmin em seu navegador.
Clique em Novo na barra lateral esquerda.
Digite db_quiz como o nome do banco de dados na caixa de texto.
Clique em Criar.
Para criar tabelas, siga estas etapas:
Selecione db_quiz na barra lateral esquerda.
Clique em SQL no menu superior.
Digite ou cole as seguintes consultas SQL na caixa de texto:
CREATE TABLE IF NOT EXISTS `questions` ( `qid` int (11) NOT NULL AUTO_INCREMENT, `question` varchar (150) NOT NULL, `is_enabled` int (11) NOT NULL, CHAVE PRIMÁRIA (`qid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE IF NOT EXISTS `options` ( `oid` int (11) NOT NULL AUTO_INCREMENT, `qid` int (11) NOT NULL, `option` varchar (100) NOT NULL, `is_correct` int (11) NOT NULL, PRIMARY KEY (`oid`), FOREIGN KEY (`qid`) REFERÊNCIAS `questions` (`qid`) ) ENG INE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE IF NOT EXISTS `scores` ( `sid` int (11) NOT NULL AUTO_INCREMENT, `score` int (11) NOT NULL, `date` data NOT NULL, PRIMARY KEY (`sid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Clique em Go para executar as consultas e criar as tabelas.
A tabela de perguntas armazenará as perguntas do questionário e um sinalizador que indica se a pergunta está habilitada ou não. A coluna qid é a chave primária que identifica exclusivamente cada questão. A coluna da pergunta é o texto da pergunta. A coluna is_enabled é um valor de 1 ou 0 que indica se a pergunta está ativa ou não.
A tabela de opções irá armazenar as opções do quiz e um sinalizador que indica se a opção está correta ou não. A coluna oid é a chave primária que identifica exclusivamente cada opção. A coluna qid é a chave estrangeira que faz referência à coluna qid na tabela de perguntas. A coluna da opção é o texto da opção. A coluna is_correct é um valor de 1 ou 0 que indica se a opção é a resposta correta ou não.
A tabela de pontuações armazenará as pontuações do questionário e a data de realização do questionário. A coluna sid é a chave primária que identifica exclusivamente cada pontuação. A coluna de pontuação é o número de respostas corretas em 10. A coluna de data é a data de realização do questionário.
Criando os scripts PHP
A próxima etapa é criar alguns scripts PHP que interagirão com o banco de dados e exibirão as páginas do questionário. Você precisará criar quatro arquivos PHP: config.php, quizclass.php, quiz.php e result.php.
Para criar um arquivo config.php, siga estas etapas:
Crie um novo arquivo chamado config.php em seu editor de texto.
Digite ou cole o seguinte código no arquivo:
connect_error) die("Falha na conexão: " . $conn->connect_error);
Salve e feche o arquivo.
O arquivo config.php armazenará as credenciais do banco de dados e criará uma conexão de banco de dados usando a extensão mysqli. Você precisará alterar os valores de DB_USER e DB_PASS de acordo com suas próprias configurações de banco de dados. A função define criará constantes que podem ser usadas em todo o script. A nova função mysqli criará um objeto que representa a conexão com o banco de dados. A propriedade connect_error verificará quaisquer erros de conexão e os exibirá, se houver. Para criar um arquivo quiz.php, siga estas etapas:
Crie um novo arquivo chamado quiz.php em seu editor de texto.
Digite ou cole o seguinte código no arquivo:
getOptions($qid); // Verifique se o usuário enviou uma resposta ou não if (isset($_POST['submit'])) // Se sim, obtenha a resposta do usuário a partir dos dados da postagem $user_answer = $_POST['option']; // Obtém a resposta correta para o id da pergunta do objeto do questionário $correct_answer = $quiz->getAnswer($qid); // Compara a resposta do usuário e a resposta correta if ($user_answer == $correct_answer) // Se forem iguais, incrementa a pontuação em 1 $_SESSION['score']++; // Incrementa o número da pergunta em 1 $_SESSION['qno']++; // Verifica se o número da questão é maior que 10 ou não if ($_SESSION['qno'] > 10) // Se sim, define o sinalizador final como true $_SESSION['end'] = true; // Recarrega a página para exibir opróxima pergunta ou cabeçalho do resultado('Localização: quiz.php'); saída();
Salve e feche o arquivo.
O arquivo quiz.php exibirá uma pergunta por vez com quatro opções e um cronômetro. Ele também manipulará a entrada do usuário e atualizará a pontuação e o número da pergunta. A função session_start iniciará uma sessão que armazenará algumas variáveis em diferentes páginas. A função require_once incluirá o arquivo de classe do questionário que contém o objeto do questionário. A função de cabeçalho redirecionará para outra página com base em algumas condições. A função isset verificará se uma variável está definida ou não. A variável $_SESSION acessará as variáveis de sessão. A variável $_POST acessará os dados de postagem de um formulário. A função de saída interromperá a execução do script. Para criar um arquivo result.php, siga estas etapas:
Crie um novo arquivo chamado result.php em seu editor de texto.
Digite ou cole o seguinte código no arquivo:
insertScore($score); // Destrói a sessão session_destroy();
Salve e feche o arquivo.
O arquivo result.php calculará e exibirá a pontuação e o feedback. Ele também inserirá a pontuação e a data na tabela de pontuações e destruirá a sessão. A função session_destroy encerrará a sessão e excluirá todas as variáveis de sessão.
Criando as páginas HTML
A próxima etapa é criar algumas páginas HTML que exibirão as instruções, perguntas, opções e resultados do questionário. Você precisará criar dois arquivos HTML: index.php e style.css.
Para criar um arquivo index.php, siga estas etapas:
Crie um novo arquivo chamado index.php em seu editor de texto.
Digite ou cole o seguinte código no arquivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Quiz with PHP and Timer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<h1>Online Quiz with PHP and Timer</h1>
<p>Welcome to the online quiz system. This quiz consists of 10 multiple-choice questions on general knowledge. You will have 10 seconds to answer each question. Your score will be displayed at the end of the quiz.</p>
<p>To start the quiz, click on the button below.</p>
<form action="quiz.php" method="post">
<input type="submit" name="start" value="Start Quiz" >
</form>
</div>
</body>
</html>
Salve e feche o arquivo.
O arquivo index.php exibirá as instruções do questionário e um botão para iniciar o questionário. Ele usará um formulário com um método post para enviar uma variável inicial para o arquivo quiz.php. Ele também será vinculado ao arquivo style.css para estilização. Para criar um arquivo style.css, siga estas etapas:
Crie um novo arquivo chamado style.css em seu editor de texto.
Digite ou cole o seguinte código no arquivo:
* box-sizing: border-box; margem: 0; preenchimento: 0; .container largura máxima: 800px; margem: 0 automático; preenchimento: 20px; h1 text-align: center; tamanho da fonte: 36px; cor: #333; p tamanho da fonte: 18px; cor: #666; tabela largura: 100%; colapso de fronteira: colapso; th, td preenchimento: 10px; borda: 1px sólido #ccc; th background-color: #eee; .button exibição: bloco; largura: 200px; margem: 20px automático; preenchimento: 10px; borda: nenhum; raio da borda: 10px; cor de fundo: #0099ff; cor: #fff; tamanho da fonte: 20px; cursor: ponteiro; .timer float: direita; tamanho da fonte: 24px; cor: #f00;
Salve e feche o arquivo.
O arquivo style.css estilizará as páginas do questionário com CSS. Ele usará algumas propriedades básicas, como box-sizing, margin, padding, width, border, background-color, color, font-size, etc. Ele também usará alguns seletores, como *, .container, h1, p, table, th, td, .button, .timer, etc.
Testando e executando o questionário
A etapa final é testar e executar o questionário em um servidor local ou em um host da web. Você precisará inserir alguns dados de amostra nas tabelas do banco de dados para fins de teste. Você também precisará executar um servidor local ou fazer upload dos arquivos para um host da web.
Para inserir alguns dados de amostra nas tabelas do banco de dados, siga estas etapas:
Abra o phpMyAdmin em seu navegador.
Selecione db_quiz na barra lateral esquerda.
Clique em SQL no menu superior.
Digite ou cole as seguintes consultas SQL na caixa de texto:
INSERT INTO question (question, is_enabled) VALUES ('Qual é a capital da França?', 1), ('Quem escreveu Hamlet?', 1), ('Qual planeta é o segundo depois do Sol?', 1), ('Qual é o nome do maior osso do corpo humano?', 1), ('Qual animal tem a vida útil mais longa?', 1), ('Qual é o nome da fobia que significa medo de aranhas?', 1), ('W Qual país ganhou a Copa do Mundo da FIFA em 2018?', 1), ('Qual é o nome da moeda usada no Japão?', 1), ('Quem pintou a Mona Lisa?', 1), ('Qual é o nome do menor país do mundo?', 1); INSERT INTO opções (qid, opção, is_correct) VALORES (1, 'Paris', 1), (1, 'Berlim', 0), (1, 'Roma', 0), (1, 'Londres', 0), (2, 'William Shakespeare', 1), (2, 'Charles Dickens', 0), (2, 'Mark Twain', 0), (2, 'Leo Tolstoy', 0), ( 3, 'Mercury', 0), (3, 'Venus', 1), (3, 'Earth', 0), (3, 'Mars', 0), (4, 'Femur', 1), (4, 'Humerus', 0), (4, 'Tibia', 0), (4, 'Radius', 0), (5, 'Bowhead Whale', 1), (5, 'Giant Tortoise', 0), (5, 'Elefante', 0), (5, 'Papagaio', 0), (6, 'Aracnofobia', 1), (6, 'Acrofobia', 0), (6, 'Claustrofobia', 0), (6, 'Agorafobia', 0), (7, 'França', 1), (7, 'Croácia', 0), (7, 'Brasil', 0), (7, 'Alemanha', 0), (8, 'Y en', 1), (8, 'Won', 0), (8, 'Peso', 0), (8, 'Rupee', 0), (9, 'Leonardo da Vinci', 1), (9, 'Vincent van Gogh', 0), ( 9, 'Pablo Picasso', 0), (9, 'Michelangelo', 0), (10, 'Vatican City', 1), (10, 'Monaco', 0), (1 0, 'Nauru', 0), (10, 'Maldivas', 0);
Clique em Go para executar as consultas e inserir os dados.
As consultas SQL irão inserir alguns exemplos de perguntas, opções e respostas nas tabelas de perguntas e opções. Você pode alterar ou adicionar mais dados conforme desejar.
Para executar o questionário em um servidor local, siga estas etapas:
Certifique-se de ter um servidor local instalado em seu computador, como XAMPP, WAMP ou MAMP.
Copie todos os arquivos (config.php, quizclass.php, quiz.php, result.php, index.php e style.css) para a pasta htdocs do seu servidor local.
Abra seu navegador e digite localhost/index.php na barra de endereço.
Siga as instruções e comece o teste.
Para executar o questionário em um host da Web, siga estas etapas:
Certifique-se de ter uma conta de hospedagem na web que suporte PHP e MySQL.
Crie um banco de dados e tabelas em seu host usando phpMyAdmin ou qualquer outra ferramenta.
Insira alguns dados de amostra nas tabelas do banco de dados usando consultas SQL ou qualquer outra ferramenta.
Altere as credenciais do banco de dados no arquivo config.php de acordo com suas configurações de host da web.
Carregue todos os arquivos (config.php, quizclass.php, quiz.php, result.php, index.php e style.css) para seu host usando FTP ou qualquer outra ferramenta.
Abra seu navegador e digite seu nome de domínio ou endereço da web seguido de /index.php na barra de endereço.
Siga as instruções e comece o teste.
Conclusão
Neste tutorial, você aprendeu como criar um sistema de quiz online com PHP e MySQL. Você usou PHP para escrever scripts que interagem com o banco de dados e exibem as páginas do questionário. Você usou o MySQL para armazenar os dados do questionário, como perguntas, opções, respostas e pontuações. Você usou HTML e CSS para criar e estilizar as páginas do questionário. Você também aprendeu a usar alguns recursos básicos do PHP, como classes, funções, sessões, formulários, etc.
Você pode melhorar ou estender o sistema de questionário adicionando mais recursos ou funcionalidades. Por exemplo, você pode:
Adicione mais perguntas e opções ao banco de dados.
Adicione mais categorias ou tópicos ao questionário.
Adicione mais tipos de perguntas, como verdadeiro/falso, preencha os espaços em branco, etc.
Adicione mais comentários ou explicações aos resultados.
Adicione mais segurança ou validação ao questionário.
Adicione mais estilos ou efeitos às páginas do questionário.
Aqui estão alguns links e recursos para aprender mais:
perguntas frequentes
O que é PHP?
PHP é uma linguagem de script do lado do servidor amplamente usada para desenvolvimento web. Pode ser incorporado em HTML e executado em um servidor web. Ele também pode interagir com bancos de dados e executar várias tarefas.
O que é MySQL?
MySQL é um sistema de gerenciamento de banco de dados relacional usado para armazenar e manipular dados. Pode ser acessado por diversas linguagens de programação, como PHP. Ele também pode lidar com grandes quantidades de dados e realizar consultas complexas.
O que é HTML?
HTML é uma linguagem de marcação usada para criar páginas da web. Ele define a estrutura e o conteúdo de uma página da Web usando tags e atributos. Também pode incluir outros elementos, como imagens, links, formulários, etc.
O que é CSS?
CSS é uma linguagem de folha de estilo usada para estilizar páginas da web. Isto CSS é uma linguagem de folha de estilo usada para estilizar páginas da web. Ele pode controlar a aparência e o layout dos elementos da web, como fontes, cores, planos de fundo, bordas, etc. Também pode criar animações e transições.
O que é uma sessão?
Uma sessão é uma maneira de armazenar e transferir dados entre diferentes páginas da web. Ele pode ser usado para manter o estado e as informações de um usuário ou de um questionário. Também pode ser usado para proteger e validar o questionário.
O que é um temporizador?
Um cronômetro é um recurso que limita o tempo para cada pergunta ou todo o questionário. Pode criar um senso de urgência e desafio para o usuário. Também pode evitar trapaças e melhorar a precisão do questionário. 0517a86e26