如何在 Django 的 for 循环中控制模型字段?

我是 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 %}

zhenhao1986 回答:如何在 Django 的 for 循环中控制模型字段?

我会认为通过使用 ajax 来做到这一点吗? 从 ajax,您可以使用问题 id 向您的视图发送请求,例如

from django.core import serializers
from django.http import JsonResponse
def GetQuestionView(request):
   if request.method == "POST" and request.is_ajax():
       question_id = request.POST.get("id")
       return JsonResponse(serializers.serialize("json",QuesModel.objects.get(pk=question_id )))
   ...

现在可以从前端发出ajax请求 查看此文档 https://docs.djangoproject.com/en/3.2/ref/csrf/ 如果得到 csrf 令牌错误

,

对于第一个问题,您可以传递模板中的所有模型对象,然后使用索引过滤掉每个问题及其选项,对于您的代码,它应该如下所示

{{ questions.0 }}

在您的模板中将为您提供查询集中的第一个对象(带有选项的问题)。使用 javascript,您现在可以更新您的问题(只需分配一个变量作为索引并每次更改其值)及其选项,每次触发下一个问题事件并显示您的结果

我认为您的第二个问题不需要第二个视图,因为您只需使用 javascript 即可更新同一页面。

本文链接:https://www.f2er.com/1152.html

大家都在问