I am looking to build a multiple choice quiz using python/flask/flask-wtf. I am successfully able to pull random questions from a database as well as pull random choices as the possible answers. I am using a for loop on the template page that first displays the question and then the possible answers.
Here is my template.
<div class="quote-block">
{% for quote in quotes %}
{{ quote.line_text }}
<form method="POST">
{{ form.hidden_tag() }}
{{ form.question }}
<input type="submit">
</form>
{% endfor %}
</div>
My problem is that the possible answers are the same for each question and in the same order. I understand why this is happening. The query into the database for the RadioField choices is only happening once. And then the results of that query are being pulled for each instance of the for loop.
Here is my view route.
#app.route('/quiz/', methods=['POST', 'GET'])
def quiz():
quotes = Quotes.query.order_by(func.rand()).limit(5)
form = Quiz()
form.question.choices = [(choice.speaker_id, choice.speaker) for choice in Characters.query.order_by(func.rand()).limit(4)]
return render_template('television/quiz.html', form=form, quotes=quotes, options=options)
And my form.
class Quiz(FlaskForm):
question = RadioField('Label', choices=[])
Like I said, all of this works. I just can't figure out how to start a new choices query for each question. Any help would be greatly appreciated. Thanks!
You could try dynamically extending your FlaskForm:
def Quiz(number_of_questions):
class _Quiz(FlaskForm):
pass
for n in range(number_of_questions):
setattr(_Quiz, RadioField('Label', choices=[]), 'question_' + str(n))
return _Quiz()
Now your form has a question_[n] attribute for each question so you can iterate it in jijna2:
<div class="quote-block">
<form method="POST">
{{ form.hidden_tag() }}
{% for q_num in range(n) %}
{{ quotes[q_num].line_text }}
{{ form['question_' + q_num|string }}
{% endfor %}
<input type="submit">
</form>
</div>
After a lot of reading and research, I realized I was trying to do too much too soon. So I took a step back and built the blocks of what I was trying to do and then it finally came together. Of course, I am having new issues with the form validation portion, but I'll include that in a new question.
My biggest roadblock was that I was trying to pull random choice options for the RadioField. Instead, I added three columns to the database table and supplied the options in the table. That made it easier to pull the options and the question with one query.
Basically, I am running a for loop over the fields in the form. If the field is a RadioField, it runs a query against the database and pulls a random row. I then use another for loop over the pulled row and assign different elements to the pieces of the RadioField (label, choices).
If you know of a more elegant way to do this, I'd love to hear it. But for now it works.
My form and template stayed the same. But here is my new route view.
#app.route('/quiz/', methods=['GET', 'POST'])
def quiz():
form = Quiz()
for field in form:
if field.type != "RadioField":
continue
else:
pulls = Quotes.query.order_by(func.rand()).limit(1)
for pull in pulls:
answer = pull.speaker
option_two = pull.option_two
option_three = pull.option_three
option_four = pull.option_four
question = pull.line_text
field.label = pull.line_text
field.choices = [(answer, answer), (option_two, option_two), (option_three, option_three), (option_four, option_four)]
return redirect(url_for('you_passed'))
return render_template('television/quiz.html', form=form)
Related
I'm pretty new to Django. I have written a text analysis program which I recently managed to deploy online. The program takes a text input and counts the occurrence of words in the input on a corresponding list, and then returns a score on several different variables.
I want to improve the program by adding radio buttons which allow the user to compare the text input to a desired score.
To exemplify, let's say my categories are "Meat, Fruit, Vegetables, Alcohol". The user provides a list of items from a store, and the program returns a score of how many items belongs to each category.
In this example, I want the user to be able to also decide (using radio buttons) if s/he wants a high, medium or low amount of any of those grocery categories. I then want the program to point out any discrepancies in the output.
The main problem I'm having is that I don't really know where to start. I've tried searching for many variations of this question, but the answers which show up always include a lot of jargon and/or terminology which I'm not familiar with. Similarly, I tried downloading a quiz app project from github to reverse engineer, but I become completely overwhelmed. Even with my best efforts so far I can't even manage to make the radio buttons show up when I try to connect them to a form:
from the html template:
<form action="" method="POST" novalidate>
{% csrf_token %}
{% for choice in choices %}
<input type="radio" name="fruit" style="margin-left: 300px" value="test1" checked> Low
<input type="radio" name="fruit" style="margin-left: 900px" value="test2" checked> High<br>
{% endfor %}
<br>
</form>
from views.py:
def selector(request):
if request.method == 'POST':
form = Selector(request.POST)
if form.is_valid():
cd = form_cleaned_data['profile']
return render(request, 'app/selector.html', {'form': form})
return render(request, 'app/selector.html')
from forms.py
SCORES = [('low','Low'),]
class Selector(forms.Form):
ranking = forms.ChoiceField(choices=SCORES, widget =
forms.RadioSelect)
I could easily write this in Python as a desktop program, but the amount of information I get when I try to look for a solution is just overwhelming. I feel like what I need would be a step-by-step tutorial on making a similar web app (for instance - a quiz which gives you a different output based on your radio button choices), but I can't seem to find anything no matter how hard I look. A tutorial which assumes I know nothing and describes even rudimentary terms would be perfect, but anything helps.
Where do I start? Any help is greatly appreciated.
I'm not entirely sure of what you are trying to do, but this should help you to display your radio-buttons and provide a decent layout to process the data being submitted. Hopefully it is of some use to you
template.html
<form action="" method="POST" novalidate>
{% csrf_token %}
{% for radio in form.ranking %}
{{ radio }}
{% endfor %}
<br>
<input type="submit" value="send">
</form>
views.py
def selector(request):
if request.method == 'POST':
form = Selector(request.POST)
if form.is_valid():
form.process() # see forms.py
return render(request, 'app/selector.html', {'form': form})
else:
form = Selector()
return render(request, 'app/selector.html', {'form': form})
forms.py
SCORES = [('low','Low'),]
class Selector(forms.Form):
ranking = forms.ChoiceField(choices=SCORES, widget=forms.RadioSelect())
def process(self):
cd = self.cleaned_data
# process data here (cd)
I have been trying to figure out why my Flask form will not properly validate my select field choices even though the choices are coming from the select field options.
My assumption is that the select option when passed back from the server is unicode and is being compared to the choice which is a string, however, I thought coerce=str would fix that. I printed out the form data and request data which is the output below. Why isn't it working?
My code is attached below, removed csrf token key from the output dict. It seems like a very simple thing, but I can't figure it out.
forms.py
class PlatformForm(FlaskForm):
platform_options = [('test', 'Test'), ('test2','Test2')]
platforms = wtforms.SelectField('Platforms', choices=platform_options, coerce=str, validators=[DataRequired()])
views.py
#app.route('/', methods=['POST', 'GET'])
def index():
form = forms.PlatformForm()
if form.is_submitted():
print form.data
print request.form
if form.errors:
print form.errors
return render_template('home.html', form=form)
index.html
{% extends "base.html" %}
{% block content %}
<h4>Select a Platform</h4>
<form method="POST">
{{ form.csrf_token }}
<select class="custom-select" name="platform">
{% for value, text in form.platforms.choices %}<br>
<option value="{{ value }}">{{ text }}</option>
{% endfor %}
</select>
<button id="submit_inputs" type="submit" class="btn btn-default">Submit</button>
</form>
{% endblock %}
output
{'platforms': 'None'}
ImmutableMultiDict([('platform', u'test')])
{'platforms': [u'Not a valid choice']}
EDIT:
I figured out the problem. It's the way I'm creating the Select drop down through HTML and Jinja. Iterating through the choices and creating option tags doesn't seem to instantiate anything in the form data itself when passed back into Python. Changing that whole for loop to just
{{form.platforms}}
created a select drop down field that actually works.
You have a name mismatch. In the form, you named your select field platforms (plural). In the HTML, you use platform (singular).
I recommend that instead of manually rendering the fields in your template, you let WTForms generate the HTML for you. For the form label, you can use {{ form.platforms.label }}, and for the actual field {{ form.platforms() }}. You can pass any attributes you want to field to have as keyword arguments.
I think something might be going wrong because of the way you are rendering the form in your html file. If my hunch is right, try this:
{% extends "base.html" %}
{% block content %}
<h4>Select a Platform</h4>
<form method="POST">
{{ form.hidden_tag() }}
Select: {{ form.plaforms}}
{{ form.submit(class="btn btn-default") }}
</form>
{% endblock %}
and then try if form.validate_on_submit() in your views.py file
taken from this stack overflow answer by pjcunningham:
"validate_on_submit() is a shortcut for is_submitted() and validate().
From the source code, line 89, is_submitted() returns True if the form
submitted is an active request and the method is POST, PUT, PATCH, or
DELETE.
Generally speaking, it is used when a route can accept both GET and
POST methods and you want to validate only on a POST request."
With this HTML:
...
{% for thing in things %}
<form method="post">
{% csrf_token %}
{{ thing.name }}
{{ form.value }}
<input type="submit" value="Submit" />
</form>
{% endfor %}
...
My website lists multiple 'things' from my database, so there can be many forms generated on the one page. How can I somehow determine in my views.py, which 'thing's' form is being submitted?
More elaboration:
Imagine you have a page of objects listed one after the other, and each object has a like button associated with it, that adds a like to the object it is next to. That's essentially what I'm trying to do here.
The problem is, I have a form that can process the like, but how do I take that like and add it to the object that it's displayed next to on the page? (by the aforementioned 'for loop')
I'm completely confused on how to go about this, am I looking at the problem the wrong way, or is there a standard idiom around this problem that I don't know about?
Thank you :)
The most common design pattern for model instance updates is to provide the primary key of an object in the url where you are submitting your post data.
# urls.py
from django.conf.urls import *
from library.views import UpdateThing
urlpatterns = patterns('',
url('^update_thing/(?P<pk>[\w-]+)$', UpdateThing.as_view(), name='update_thing'),
# views.py
def my_view(request, pk=None):
if pk:
object = thing.objects.get(pk=pk)
form = MyModelForm(data=request.POST or None, instance=object)
if form.is_valid():
...
Now, let's specify (using Django's url template tag) that we want to submit post data for each object to the correct url.
{% for thing in things %}
<form method="post" action="{% url 'update_thing' thing.pk %}">
{% csrf_token %}
{{ thing.name }}
{{ form.value }}
<input type="submit" value="Submit" />
</form>
{% endfor %}
The url tag does a reverse lookup through your urls for the name kwarg supplied for a given url, and accepting positional arguments (such as, in this case, thing.pk) and, when needed, keyword arguments.
The standard way to handle multiple forms of the same kind on one page with Django is to use Formsets.
It handles the annoying details like displaying errors on one form while preserving the input on others etc.
However, in your specific case that might be overkill. If you just want to create a like for an object, there isn't really any user input that needs to be validated, so you don't really need a form. Just perform a POST to a specified URL, maybe with Javascript. If the user messes with the URL, you display a 404.
I have a form with several input fields about a meeting.
#app.route('/Alt_Reuniao/<WCodigoChaveP>', methods=['GET', 'POST'])
def Alt_Reuniao(WCodigoChaveP):
# This function returns a list with de data from the Database about a specific meeting
WReuniao = Executa_Query_Leitura("0005", WCodigoChaveP, "O")
if not WReuniao:
flash('Error.......')
return redirect(url_for('Cad_Reunioes'))
else:
if WReuniao[8]:
# this function returns a list with de data from the Database about the topic of the meeting
WAssunto = Executa_Query_Leitura("0002", WReuniao[8], "O")
Wform = Cad_Reunioes_Form()
if request.method == "POST":
if Wform.validate():
# save the data ......
return redirect(url_for('Cad_Reunioes'))
else:
for Werro in Wform.errors.values():
flash(Werro[0])
return render_template('Reuniao.html', Wformulario=Wform)
else:
Wform.WCPO_Reuniao.data = WReuniao[1]
Wform.WCPO_Desc_Reuniao.data = WReuniao[2]
Wform.WCPO_Nro_Part.data = WReuniao[3]
Wform.WCPO_Cod_Assunto.data = WReuniao[8]
if WReuniao[8]:
if WAssunto:
Wform.WCPO_Assunto.data = WAssunto[1]
return render_template('Reuniao.html', Wformulario=Wform)
This is my Reuniao.html template:
{% extends "Base_Cad_2.html" %}
{% block dados %}
{{ Wformulario.WCPO_Reuniao.label(id="WCPO_Reuniao", class="lab1") }} {{ Wformulario.WCPO_Reuniao(size = 100, maxlength=30, id="WCPO_Reuniao") }}
<p id="PL"> {{ Wformulario.WCPO_L_Desc_Reuniao(id="WCPO_L_Desc_Reuniao", class="lab1") }} </p>
{{ Wformulario.WCPO_Desc_Reuniao(rows=5, cols=100, id="WCPO_Desc_Reuniao") }}
{{ Wformulario.WCPO_Nro_Part.label(id="WCPO_Nro_Part", class="lab1") }} {{ Wformulario.WCPO_Nro_Part(size = 5, id="WCPO_Nro_Part") }}
{{ Wformulario.WCPO_Cod_Assunto.label(id="WCPO_Cod_Assunto", class="lab1") }} {{ Wformulario.WCPO_Cod_Assunto(size=10, readonly='readonly', id="WCPO_Cod_Assunto") }}
{{ Wformulario.WCPO_Assunto.label(id="WCPO_Assunto", class="lab1") }} {{ Wformulario.WCPO_Assunto(size=95, readonly='readonly', id="WCPO_Assunto") }}
<button id="Selec_Assunto" name="Selec_Assunto" value="Selec_Assunto" type="button"> <a class="botoes" href="{{ url_for('Selec_Assuntos_Inicio', WRotChama = "001", WCodorig = Wformulario.WCPO_Cod_Reuniao ) }}" hreflang="pt-br"> Seleciona </a> </button>
{% endblock %}
{% block botoes %}
<button id="gravar" name="gravar" value="Gravar" type="submit" class="botoes" > Gravar </button>
{% endblock %}
Basically, this view works fine.
When I select a meeting from a list in a previous template the view method is a GET and the data from the database is passed to the form and the template renders correctly.
When the method is a POST the data from the form is saved correctly in the Database,…
On the form there is a button Selec_Assunto. When the user click on that button I point to a view witch renders a template with a list of all possible topics for the meeting. These topics come from the database. There can be a lot of them so I can’t just use a combo. That’s why I use a template.
When the user select an topic from the list I have to render Alt_Reuniao view again and I have to pass to the view the selected topic.
This is working fine.
My problem is this: the method again is a GET. If before hitting the Selec_Assunto button the user alter or input data on the other fields in the form I loose these data from the user when the topic is selected. The view render the template with the data from the database again.
Everything seems to be working fine. I just want to maintain the data the user already change in the form before clicking on the Selec_Assunto button.
As you can see I’m new in Web developing, Python, Flask,…
Thanks a lot in advance for your help.
In this case you could update the "Selec_Assunto" button behavior to post the form data back to the server, but also include a redirect variable. When the redirect variable is included, the server would save the form changes and then redirect to the "Selec_Assuntos_Inicio" view, whereas it would follow the previous/normal form posting behavior if the redirect variable isn't present. For example:
if request.method == "POST":
if Wform.validate():
# save the data ……
if Wform.redirect.data:
return redirect(Wform.redirect.data)
else:
return redirect(url_for('Cad_Reunioes'))
else:
for Werro in Wform.errors.values():
flash(Werro[0])
return render_template('Reuniao.html', Wformulario=Wform)
It's worth noting that this approach requires you to use JavaScript to override the "Selec_Assunto" button behavior (as you'd be forcing it to perform a form submission essentially). Here's one way you could do that using jQuery:
$('button#Selec_Assunto').on('click', function() {
$('form#formId').append('<input type="hidden" name="redirect" value="{{ url_for('Selec_Assuntos_Inicio', WRotChama = "001", WCodorig = Wformulario.WCPO_Cod_Reuniao ) }}">');
$('form#formId').submit();
});
That said, a potentially better option from both a coding and usability perspective would be to asynchronously load the topic data into the existing page so that you don't have to reload the view at all. That would enable you to avoid needing to do an interim save of the form data.
I am learning how to use sqlalchemy and I am developing small app. I am having some issues trying to update data stored in the db using the ORM. I'm not sure what I am missing. The form edit_product.html gets populated with the right data however the return redirect(url_for statement is fired without updating the data. I am using merge(), I tried using add() as suggested by some tutorials, however if I do this I get an error saying that the record already exists.
This is my edit_product function in the views.py:
from database import db_session
#app.route('/product/edit/<int:product_id>', methods=['GET', 'POST'])
def edit_product(product_id):
product = Product.query.filter(Product.id == product_id).first()
form = NewOtrosForm(obj=product)
if request.method == 'POST':
print request.form
if form.validate():
form.populate_obj(product)
db_session.commit()
return redirect(url_for('product'))
else:
return render_template('edit_product.html', form=form)
This is what I have in my edit form in the jinja2 template:
{% from "_formhelpers.html" import render_field %}
<form method=post action="">
<dl>
{{ render_field(form.name) }}
{{ render_field(form.price) }}
{{ render_field(form.description) }}
{{ render_field(form.provider) }}
{{ render_field(form.detalles) }}
</dl>
<p><input type="submit" value="Save Changes"></p>
</form>
Can you try to change the below from :
form = NewOtrosForm(obj=product)
to:
form = NewOtrosForm(request.form, obj=product)
You don't need to use use merge() here, its purpose is to transfer state from an outside object into a new or already existing instance within a session. Your product object already belongs to the session, so it's enough to call form.populate_obj(product) (changes to product marks it as "dirty" in this session) and db_session.commit() after that.