我是 Django 的新手。我正在尝试构建一个测验 Web 应用程序,该应用程序一次提出一个问题,一旦学生在单选按钮上选择一个答案,它就会立即显示答案,无论他的答案是正确还是错误。
如果不正确,它会向他们显示正确的答案。然后点击提交按钮后出现下一个问题。在最后一个问题之后,显示结果。
我有两个问题-
1.我的第一个问题是我无法从所有问题中一次提出一个问题。但是,我可以一次提出所有问题。我该怎么做?
2.我的第二个问题是我不知道点击提交按钮后我将如何进入下一个问题。 下面是我的文件。请帮我解决这个问题。
工作序列中的图像- 1.Home Page 2.Selecting Quiz1 3.quiz1.html page showing quiz rules 4.home1.html page showing all Questions 5.result.html page showing result
#models.py
from django.db import models
# Create your models here.
class QuesModel(models.Model):
question=models.CharField(max_length=200,null=True)
op1=models.CharField(max_length=200,null=True)
op2=models.CharField(max_length=200,null=True)
op3=models.CharField(max_length=200,null=True)
op4=models.CharField(max_length=200,null=True)
ans=models.CharField(max_length=200,null=True)
def __str__(self):
return self.question
#views.py
from django.shortcuts import render
from Quiz import models
from Quiz.models import QuesModel
from django.views.generic import TemplateView,ListView,DetailView,CreateView,UpdateView,DeleteView
# Create your views here.
def ques(request):
if request.method=="POST":
print(request.POST)
questions=QuesModel.objects.all()
total=0
correct=0
wrong=0
score=0
percent=0
for q in questions:
c=False
w=False
total+=1
print("Ques: ",request.POST.get(q.question))
print("Ans: ",q.ans)
print()
if q.ans== request.POST.get(q.question):
c=True
print("correct ans")
score+=10
correct+=1
else:
w=True
print("wrong ans")
check=True
wrong+=1
print("check value: ",check)
correct_ans=q.ans
percent=(score/(total*10))*100
context={'correct_ans':correct_ans,'score':score,'time': request.POST.get('timer'),'correct':correct,'wrong':wrong,'percent':percent,'total':total}
return render(request,'Quiz/result.html',context)
else:
questions=QuesModel.objects.all()
context={'questions':questions}
return render(request,'Quiz/home1.html',context)
def home(request):
return render(request,'Quiz/home.html')
def quiz1(request):
return render(request,'Quiz/quiz1.html')
def result(request):
return render(request,'Quiz/result.html')
#Quiz(App)/urls.py
from django.urls import path
from . import views
urlpatterns=[
path('',views.home,name='home'),path('quiz1',views.quiz1,name='quiz1'),path('ques/',views.ques,name='ques'),# path('ques_list/',views.QuestionsListView.as_view(),name='ques_list'),path('result',views.result,name='result'),]
#base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>Quiz Island</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}">Quiz Island</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{% url 'home' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'result' %}">Result</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Quizzes
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="{% url 'quiz1' %}">Quiz 1</a></li>
<li><a class="dropdown-item" href="#">Quiz 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
#home1.html
{% extends 'Quiz/base.html' %}
{% block content %}
{% load static %}
<div class="container ">
<h1>Welcome to Dataflair Quiz</h1>
<div align="right " id="displaytimer"><b>Timer: 0 seconds</b></div>
{% for q in questions%}
{{forloop.counter}}
<form method='post' action=''>
{% csrf_token %}
<div class="form-group">
<label for="question">{{q.question}}</label>
</div>
<div class="form-check">
<div class="form-check">
<input class="form-check-input" type="radio" name="{{q.question}}" id="gridRadios1" value="op1" >
<label class="form-check-label" for="gridRadios1">
{{q.op1}}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="{{q.question}}" id="gridRadios2" value="op2">
<label class="form-check-label" for="gridRadios2">
{{q.op2}}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="{{q.question}}" id="gridRadios1" value="op3">
<label class="form-check-label" for="gridRadios1">
{{q.op3}}
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="{{q.question}}" id="gridRadios2" value="op4">
<label class="form-check-label" for="gridRadios2">
{{q.op4}}
</label>
</div>
<br>
</div>
{% endfor %}
<input id='timer' type='hidden' name="timer" value="">
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% block script %}
<script>
console.log('hello world')
const timer=document.getElementById('displaytimer')
console.log(timer.textContent)
const inputtag = document.getElementById('timer')
t=0
setInterval(()=>{
t+=1
timer.innerHTML ="<b>Timer: " +t+" seconds</b>"
inputtag.value = t
},1000)
</script>
{% endblock script %}
</div>
{% endblock %}
#quiz1.html
{% extends 'Quiz/base.html' %}
{% block content %}
<div class="container">
<div class="jumbotron">
<h2>Quiz 1</h2>
<h4>Rules</h4>
{{QuesModel.id}}
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="btn btn-warning" href="{% url 'ques' %}">Start Quiz</a>
</div>
</div>
{% endblock %}
#result.html
{% extends 'Quiz/base.html' %}
{% block content %}
<div class="container">
{% if check %}
<p>Your ans is wrong,Correct ans is :{{correct_ans}}</p>
{% endif %}
<p>Score: {{score}}</p>
<p>percent: {{percent}}%</p>
<p>total: {{total}}</p>
<p>correct: {{correct}}</p>
<p>wrong: {{wrong}}</p>
<p>time: {{time}}</p>
</div>
{% endblock %}