Como criar um projeto de questionário online em ASP.NET com o download do código-fonte
Os testes on-line são uma forma popular de testar e aprimorar seu conhecimento sobre vários tópicos. Eles também podem ser usados para fins educacionais, como a criação de cursos interativos, avaliações e pesquisas. Neste artigo, você aprenderá como criar um projeto de questionário online simples em asp.net com o download do código-fonte. Você usará ASP.NET MVC 5, Entity Framework 6, SQL Server, Bootstrap e jQuery para criar um aplicativo da Web que permite aos usuários criar e responder a questionários online.
online quiz project in asp.net with source code download
Pré-requisitos
Para seguir este tutorial, você precisará do seguinte:
Visual Studio 2019 ou posterior (.NET Framework 4.8 ou posterior)
SQL Server 2019 ou posterior
Conhecimento básico de C#, HTML, CSS, JavaScript e SQL
Um navegador da Web (como Chrome, Firefox ou Edge)
Base de dados
A primeira etapa é criar um banco de dados e tabelas para armazenar os dados do questionário. Você usará o SQL Server Management Studio (SSMS) para executar o seguinte script:
-- Criar banco de dados CREATE DATABASE [OnlineQuizDB] GO -- Usar banco de dados USE [OnlineQuizDB] GO -- Criar tabela de questionário CREATE TABLE [dbo].[Quiz]( [QuizId] [int] IDENTITY(1,1) NOT NULL, [Title] [nvarchar](50) NOT NULL, [Description] [nvarchar](max) NULL, [CreatedDate] [datetime] NOT NULL DEFAULT (getdate()), CONSTRAINT [PK_Quiz] PRIMARY KEY CLUSTERED ( [QuizId] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO -- Criar tabela de perguntas CREATE TABLE [dbo].[Question]( [QuestionId] [int] IDENTITY(1,1) NOT NULL, [QuizId] [int] NOT NULL, [Text] [nvarchar](max) NOT NULL, CONSTRAINT [PK_Question] PRIMARY KEY CLUSTERED ( [QuestionId] ASC)WITH (PAD_INDEX = OFF, STATISTICS_NORECOM PUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO -- Cria restrição de chave estrangeira na tabela de perguntas ALTER TABLE [dbo].[Question] WITH CHECK ADD CONSTRAINT [FK_Question_Quiz] FOREIGN KEY([QuizId]) REFERENCES [ dbo].[Quiz] ([QuizId]) GO ALTER TABLE [dbo].[Question] CHECK CONSTRAINT [FK_Question_Quiz] GO -- Criar tabela de opções CREATE TABLE [dbo].[Option]( [OptionId] [int] IDENTITY(1,1) NOT NULL, [QuestionId] [int] NOT NULL, [Text] [nvarchar](max) NOT NULL, [IsCorrect] [bit ] NOT NULL, CONSTRAINT [PK_Option] PRIMARY KEY CLUSTERED ( [OptionId] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [. PRIMARY] TEXTIMAGE_ON [PRIMARY] GO -- Cria restrição de chave estrangeira na tabela Option ALTER TABLE [dbo].[Option] WITH CHECK ADD CONSTRAINT [FK_Option_Question] FOREIGN KEY([QuestionId]) REFERENCES [dbo].[Question] ([QuestionId]) GO ALTER TABLE [dbo].[Option] CHECK CONSTRAINT [FK_Option_Question] GO
Este script criará um banco de dados chamado OnlineQuizDB e três tabelas: Quiz, Question e Option. A tabela Quiz armazenará as informações básicas de cada quiz, como título, descrição e data de criação. A tabela de perguntas armazenará o texto de cada pergunta e o ID do questionário ao qual ela pertence. A tabela Option armazenará o texto e a correção de cada opção e o ID da pergunta a que ela pertence. As tabelas são relacionadas por restrições de chave estrangeira.
Aplicativo MVC
A próxima etapa é criar um aplicativo MVC e configurar o Entity Framework. Você usará o Visual Studio para criar um novo projeto e adicionar os pacotes e arquivos necessários. Siga esses passos:
Abra o Visual Studio e selecione Criar um novo projeto.
Pesquise ASP.NET Web Application (.NET Framework) e clique em Avançar.
Nomeie seu projeto OnlineQuizApp e clique em Criar.
Selecione MVC como modelo de projeto e clique em Criar.
Clique com o botão direito do mouse em seu projeto no Solution Explorer e selecione Manage NuGet Packages.
Pesquise por EntityFramework e instale a versão mais recente.
Pesquise por Bootstrap e instale a versão mais recente.
Pesquise por jQuery e instale a versão mais recente.
Clique com o botão direito do mouse em seu projeto no Gerenciador de Soluções e selecione Adicionar > Novo Item.
Selecione ADO.NET Entity Data Model e denomine-o OnlineQuizModel.edmx.
Selecione EF Designer no banco de dados e clique em Avançar.
Selecione Nova conexão e insira suas credenciais do SQL Server e o nome do banco de dados (OnlineQuizDB).
Clique em OK e em Avançar.
Selecione todas as tabelas (Quiz, Pergunta, Opção) e clique em Concluir.
Isso criará um modelo de dados de entidade que mapeia suas tabelas de banco de dados para classes C#. Você pode visualizar o diagrama do modelo no arquivo OnlineQuizModel.edmx. Você também pode acessar a classe de contexto de dados (OnlineQuizModelContainer) que fornece métodos para consultar e salvar dados.
Controlador de questionário
A próxima etapa é criar um controlador de questionário e definir as ações para exibição e envio de questionários.Você usará o Visual Studio para adicionar uma nova classe de controlador e escrever algum código. Siga esses passos:
Clique com o botão direito do mouse na pasta Controllers no Solution Explorer e selecione Add > Controller.
Selecione Controlador MVC 5 - Vazio e clique em Adicionar.
Nomeie seu controlador como QuizController.cs e clique em Adicionar.
Adicione as seguintes instruções using na parte superior do arquivo:
usando Sistema; usando System.Collections.Generic; usando System.Linq; usando System.Web; usando System.Web.Mvc; usando OnlineQuizApp.Models;
Adicione um campo privado para o objeto de contexto de dados:
private OnlineQuizModelContainer db = new OnlineQuizModelContainer();
Adicione um método de ação para exibir uma lista de questionários:
// GET: Questionário public ActionResult Index() // Obtém todos os questionários do banco de dados var quizzes = db.Quiz.ToList(); // Retorna a view com os quizzes como modelo return View(quizzes);
Adicione um método de ação para exibir um questionário por id:
// GET: Quiz/Details/5 public ActionResult Details(int? id)
Adicione um método de ação para enviar um questionário por id:
// POST: Quiz/Submit/5 [HttpPost] [ValidateAntiForgeryToken] public ActionResult Submit(int? id, formulário FormCollection) id
O método de ação Enviar receberá o ID do questionário e a coleção de formulários como parâmetros. Ele percorrerá cada pergunta no questionário e verificará o ID da opção selecionada na coleção de formulários. Se a opção estiver correta, aumentará a pontuação em um. Em seguida, ele calculará a porcentagem de respostas corretas e criará um objeto de modelo de exibição para armazenar o questionário e os dados da pontuação. Por fim, ele retornará a exibição com o modelo de exibição como modelo.
Razor Pages
A próxima etapa é criar páginas Razor para as exibições do questionário e usar Bootstrap e jQuery para estilo e interatividade. Você usará o Visual Studio para adicionar novas exibições e escrever algum código. Siga esses passos:
Clique com o botão direito do mouse na pasta Views no Solution Explorer e selecione Add > View.
Nomeie sua exibição como Index.cshtml e selecione List como o modelo e Quiz como a classe de modelo.
Clique em Adicionar para gerar a visualização.
Substitua o código no arquivo Index.cshtml pelo seguinte:
@model IEnumerable @ ViewBag.Title = "Aplicativo de Quiz Online"; Aplicativo de teste on-line
Bem-vindo ao Online Quiz App, um aplicativo da Web que permite criar e responder a questionários online. Escolha um questionário na lista abaixo ou crie seu próprio questionário.
@Html.ActionLink("Criar novo questionário", "Criar", "Quiz", null, new @class = "btn btn-primary" )
Título
Descrição
Data de criação
Ações
@foreach (var item no modelo)
@Html.DisplayFor(modelItem => item.Title)
@Html.DisplayFor(modelItem => item.Description)
@Html.DisplayFor(modelItem => item.CreatedDate)
@Html.ActionLink("Take Quiz", "Detalhes", new id = item.QuizId , new @class = "btn btn-success" )
Essa exibição exibirá uma lista de questionários do modelo e fornecerá links para responder, editar e excluir questionários.Ele também fornecerá um link para criar um novo questionário. Ele usará classes Bootstrap para estilizar os elementos.
Clique com o botão direito do mouse na pasta Views no Solution Explorer e selecione Add > View.
Nomeie sua exibição como Details.cshtml e selecione Details como o modelo e Quiz como a classe de modelo.
Clique em Adicionar para gerar a visualização.
Substitua o código no arquivo Details.cshtml pelo seguinte:
@model OnlineQuizApp.Models.Quiz @ ViewBag.Title = "Responder ao questionário"; Faça o teste: @Model.Title
@Modelo.Descrição
@using (Html.BeginForm("Submit", "Quiz", new id = Model.QuizId , FormMethod.Post)) @Html.AntiForgeryToken() @ int i = 0; foreach (var questão em Model.Question) i++; @ int j = 0; foreach (var opção em questão.Option) j++; @Html.RadioButton(question.QuestionId.ToString(), option.OptionId) @j.@option.Text
Essa exibição exibirá os detalhes do questionário do modelo e fornecerá um formulário para respondê-lo. Ele usará classes Bootstrap e jQuery para criar um efeito sanfona para as perguntas e opções. Ele também usará um token anti-falsificação oculto para evitar ataques de falsificação de solicitação entre sites.
Clique com o botão direito do mouse na pasta Views no Solution Explorer e selecione Add > View.
Nomeie sua exibição como Submit.cshtml e selecione Vazio (sem modelo) como modelo.
Clique em Adicionar para gerar a visualização.
Substitua o código no arquivo Submit.cshtml pelo seguinte:
@model OnlineQuizApp.Models.QuizViewModel @ ViewBag.Title = "Enviar questionário"; Enviar questionário: @Model.Quiz.Title
Você concluiu o teste. Sua pontuação é @Model.Score de @Model.Quiz.Question.Count. Sua porcentagem é @Model.Percentage%.
Pergunta
sua Resposta
Resposta correta
Resultado
@ foreach (var pergunta em Model.Quiz.Question) var selectedOptionId = Request.Form[question.QuestionId.ToString()]; var selectedOption = question.Option.FirstOrDefault(o => o.OptionId.ToString() == selectedOptionId); var correctOption = question.Option.FirstOrDefault(o => o.IsCorrect); var result = selectedOption != null && selectedOption.IsCorrect ? "Correto incorreto"; @question.Text @(selectedOption != null ? selectedOption.Text : "Não respondido") @correctOption.Text @resultado
@Html.ActionLink("Voltar para a lista de questionários", "Índice", "Quiz", null, new @class = "btn btn-primary" )
Essa exibição exibirá os resultados do envio do questionário do modelo e fornecerá um link para voltar à lista de questionários. Ele usará classes Bootstrap para estilizar os elementos. Ele também usará a coleção Request.Form para obter o ID da opção selecionada para cada pergunta e compará-lo com o ID da opção correta.
Teste e implantação
A etapa final é testar e implantar seu projeto de questionário online em asp.net. Você usará o Visual Studio para executar e publicar seu projeto. Siga esses passos:
Pressione F5 ou clique no botão Iniciar no Visual Studio para executar seu projeto.
Navegue até para ver a lista de questionários.
Crie, edite, exclua e faça testes e verifique se tudo funciona conforme o esperado.
Clique com o botão direito do mouse em seu projeto no Gerenciador de Soluções e selecione Publicar.
Selecione um destino de publicação, como Azure, IIS, FTP ou Pasta.
Insira as configurações necessárias, como nome do servidor, nome do site, nome de usuário, senha, etc.
Clique em Publicar para publicar seu projeto no local de destino.
Navegue até a URL publicada e teste seu projeto de questionário online em asp.net.
Conclusão
Neste artigo, você aprendeu como criar um projeto de questionário online simples em asp.net com o download do código-fonte. Você usou ASP.NET MVC 5, Entity Framework 6, SQL Server, Bootstrap e jQuery para criar um aplicativo Web que permite aos usuários criar e responder a questionários online. Você criou um banco de dados e tabelas para armazenar dados de questionário, um aplicativo MVC e um modelo de dados de entidade para acessar dados, um controlador de questionário e páginas de barbear para exibir e enviar questionários e testou e implantou seu projeto. Você pode baixar o código-fonte deste projeto aqui: [OnlineQuizApp.zip].
perguntas frequentes
Aqui estão algumas perguntas e respostas comuns sobre projetos de quiz online em asp.net:
P: Como posso adicionar mais recursos ao meu projeto de quiz online em asp.net?
R: Você pode adicionar mais recursos ao seu projeto de questionário online em asp.net modificando o código e adicionando novas funcionalidades. Por exemplo, você pode adicionar recursos como: - Autenticação e autorização para restringir o acesso a questionários e resultados de questionários - Categorias e tags para organizar questionários por tópicos e palavras-chave - Feedback e comentários para permitir que os usuários avaliem e revisem questionários - Tabelas de classificação e emblemas para exibir os melhores desempenhos e recompensas conquistas - Temporizador e contagem regressiva para limitar o tempo para responder a questionários - Randomização e embaralhamento para gerar diferentes perguntas e opções de questionário a cada vez - Conteúdo multimídia e rico para incluir imagens, vídeos, áudio etc. em questionários - Exportação e importar para permitir que os usuários baixem e carreguem questionários em vários formatos P: Como posso melhorar o desempenho e a segurança do meu projeto de questionário online no asp.net?
R: Você pode melhorar o desempenho e a segurança de seu projeto de questionário online em asp.net aplicando algumas práticas e técnicas recomendadas, como: - Cache e compactação para reduzir o tempo de carregamento e o uso de largura de banda de suas páginas da Web - Validação e sanitização para evitar entradas inválidas ou maliciosas de usuários - Criptografia e hash para proteger dados confidenciais, como senhas e respostas de questionários - Manipulação e registro de erros para capturar e corrigir quaisquer exceções ou bugs em seu código - Teste e depuração para garantir a qualidade e funcionalidade de seu código - Atualização e atualização para use as versões mais recentes das estruturas, bibliotecas e ferramentas que você usa P: Como posso aprender mais sobre projetos de quiz online em asp.net?
R: Você pode aprender mais sobre projetos de questionário online em asp.net lendo alguns recursos e tutoriais online, como: - [ASP.NET MVC 5 Tutorial]( - [Tutorial Entity Framework 6]( troduction.aspx) - [Bootstrap 5 Tutorial]( - [jQuery Tutorial]( - [Online Quiz Project in ASP.NET MVC with Source Code]( P: Quais são algumas alternativas para projetos de quiz online em asp.net?
R: Algumas alternativas para projetos de quiz online em asp.net são: - Projetos de quiz online em outras estruturas ou linguagens de desenvolvimento web, como PHP, Python, Ruby, Java, etc. - Plataformas ou serviços de quiz online, como Google Forms, SurveyMonkey, Quizizz, Kahoot, etc. P: Quais são alguns benefícios dos projetos de quiz online em asp.net?
R: Alguns benefícios dos projetos de quiz online em asp.net são: - São fáceis de criar e personalizar com a ajuda do Visual Studio e outras ferramentas - São escaláveis e flexíveis com o suporte de ASP.NET MVC 5 e Entity Framework 6 - São responsivos e interativos com o uso de Bootstrap 5 e jQuery - São divertidos e envolventes para usuários que desejam testar seus conhecimentos ou aprender coisas novas 0517a86e26
Comments