如何在 django 的 for 循环中控制模型字段？答案

【问题标题】：How can I control model fields in for loop in django?如何在 django 的 for 循环中控制模型字段？
【发布时间】：2021-08-01 17:21:37
【问题描述】：

我是 django 的新手。我正在尝试构建一个测验网络应用程序，一次提出一个问题，一旦学生在单选按钮上选择一个答案，它会立即显示他的答案是否正确。

如果不正确，它会向他们显示正确的答案。然后在点击提交按钮后出现下一个问题。最后一道题后，显示结果。

我有两个问题-

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

【问题讨论】：

标签： javascript html django for-loop django-quiz

【解决方案1】：

我会认为通过使用 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 令牌错误

【讨论】：

感谢您的关注。其实兄弟我不知道ajax？有没有使用基本 django 的简单解决方案，请告诉我？

【解决方案2】：

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

{{ questions.0 }}

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

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

【讨论】：