Question

我正在制作一个简单的基于网络的调查问卷。它包含两个问题，用户需要在每个问题上单击其中一个比例（从1到5），然后单击“提交”按钮转到下一页。

但是，鉴于目前的情况，我只能点击这十个按钮中的一个按钮。

<html>
<head>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="/static/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
</head>

<body>
    <div class="container"><hr>

    {% for question, question_desc in questions.items() -%}
        <h2>{{ question_desc }}</h2>
        <div class="row">

            <div class="col-sm-4" align="right">
                <a class="btn btn-link disabled btn-lg" disabled>{{ scales_description[question]['least'] }}</a>
            </div>

            <div class="col-sm-4" align="center">
                <div class="btn-group btn-group-justified">
                    {% for i in scales -%}
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary btn-lg">{{ i }}</button>
                    </div>
                    {% endfor -%}
                </div>
            </div>

            <div class="col-sm-4" align="left">
                <a class="btn btn-link disabled btn-lg" disabled>{{ scales_description[question]['most'] }}</a>
            </div>

        </div>
    {% endfor -%}

        <hr><a href="#" type="button" class="btn btn-success btn-lg">Submit</a>
    </div>
</body>

尝试按照this answer修改代码，但仍然无效（我使用标签代替按钮）。确实，我可以选择多个按钮，但是，我可以选择所有按钮。我的目标是只在一个组中选择一个。此外，按钮内的圆圈是可见的。

<div class="col-sm-4" align="center">
<div class="btn-group btn-group-justified">
    {% for i in scales -%}
    <div class="btn-group">
    <!--<button type="button" class="btn btn-primary btn-lg">{{ i }}</button>-->
    <label for="" class="btn btn-primary btn-lg"><input type="radio">{{ i }}</label>
</div>
{% endfor -%}
</div>

所以我的第一个问题是如何使我的代码仅用于选择组中的一个按钮？我的第二个问题是如何将选定按钮中的值传递给href，以便用户可以导航到下一页以查看他/她选择的概述？以下是用户选择3和3作为答案的下一页示例。

任何建议都将不胜感激。非常感谢！

结构和完整代码

/my_app
/my_app
    __init__.py
    views.py

/static
    /css
        ...
    /fonts
        ...
    /js
        ...

/templates
    index.html
    next_page.html
run.py

run.py

#!flask/bin/python
from my_app import app
import webbrowser

webbrowser.open_new('http://127.0.0.1:5000')
app.run(debug=True)

初始化的.py

from flask import Flask

app = Flask('templates')

from my_app import views

views.py

from my_app import app
from flask import render_template

@app.route('/')
def root():
    questions = {
                 'question_1':'This is a question related to frequency',
                 'question_2':'This is a question related to painfulness'
                }
    scales = list(range(1,6))
    desc = {
            'question_1':{'least':'seldom', 'most':'often'},
            'question_2':{'least':'not at all', 'most':'so painful'}
           }

    return render_template('index.html',
                           questions = questions,
                           scales = scales,
                           scales_description = desc)

@app.route('/next_page/<selected_scale_q1>/<selected_scale_q2>/')
def next_page(selected_scale_q1, selected_scale_q2):

    selected_scale = {
                      'question_1': {'question':'This is a question related to frequency', 'answer':selected_scale_q1},
                      'question_2': {'question':'This is a question related to painfulness', 'answer':selected_scale_q2}
                     }

    return render_template('next_page.html', selected_scale = selected_scale)

的index.html

<html>
    <head>
        <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="/static/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    </head>

    <body>
        <div class="container"><hr>

        {% for question, question_desc in questions.items() -%}
            <h2>{{ question_desc }}</h2>
            <div class="row">

                <div class="col-sm-4" align="right">
                    <a class="btn btn-link disabled btn-lg" disabled>{{ scales_description[question]['least'] }}</a>
                </div>

                <div class="col-sm-4" align="center">
                    <div class="btn-group btn-group-justified">
                        {% for i in scales -%}
                        <div class="btn-group">
                            <!--<button type="button" class="btn btn-primary btn-lg">{{ i }}</button>-->
                            <label for="" class="btn btn-primary btn-lg"><input type="radio">{{ i }}</label>
                        </div>
                        {% endfor -%}
                    </div>
                </div>

                <div class="col-sm-4" align="left">
                    <a class="btn btn-link disabled btn-lg" disabled>{{ scales_description[question]['most'] }}</a>
                </div>

            </div>
        {% endfor -%}

            <hr><a href="#" type="button" class="btn btn-success btn-lg">Submit</a>
            <!--<hr><a href="/next_page/3/3/" type="button" class="btn btn-success btn-lg">Submit</a>-->
        </div>
    </body>
</html>

next_page.html

<html>
    <head>
        <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <script src="/static/js/bootstrap.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    </head>

    <body>
        <div class="container"><hr>

            <div class="row">
                <div class="col-sm-6" align="center"><h2>Question</h2></div>
                <div class="col-sm-6" align="center"><h2>Answer</h2></div>
            </div>

            {% for question_seq, dictionary in selected_scale.items() -%}
            <div class="row">
                <div class="col-sm-6" align="left"><h2>{{ dictionary['question'] }}</h2></div>
                <div class="col-sm-6" align="center"><h2>{{ dictionary['answer'] }}</h2></div>
            </div>
            {% endfor -%}

            <hr><a href="/" type="button" class="btn btn-success btn-lg">Back to home page</a>
        </div>
    </body>
</html>

Python Flask从不同的按钮组中选择多个按钮并将它们传递给HREF

0 个答案: