Variable substitution syntax in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a variable in a Flask template using Jinja2 syntax.

Flask

<p>Hello, {{ [1] }}!</p>

Drag options to blanks, or click blank then click option'

Aname

Bvar

Cinput

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using Python functions like print inside {{ }}

Forgetting to use double curly braces

Using incorrect variable names

In Flask templates, variables are shown using double curly braces with the variable name inside, like {{ name }}.

2fill in blank

medium

Complete the code to substitute a variable called 'user' in the template.

Flask

<h1>Welcome, {{ [1] }}!</h1>

Drag options to blanks, or click blank then click option'

Auser

Bname

Cusername

Dvisitor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than passed

Missing the double curly braces

Using single curly braces

The variable user is used inside the double curly braces to show its value in the template.

3fill in blank

hard

Fix the error in the template variable substitution syntax.

Flask

<p>Your score is {{ [1] }}</p>

Drag options to blanks, or click blank then click option'

Ascore;

Bscore()

Cscore:

Dscore

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses like function calls

Adding semicolons or colons

Using incorrect variable names

Variables in Jinja2 templates should be referenced by name only, without parentheses or punctuation.

4fill in blank

hard

Fill both blanks to correctly display a user's first and last name using variable substitution.

Flask

<p>Full name: {{ [1] }} {{ [2] }}</p>

Drag options to blanks, or click blank then click option'

Afirst_name

Blast_name

Cusername

Dfullname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single variable for full name when separate variables exist

Forgetting to use double curly braces for both variables

Mixing variable names

Use first_name and last_name variables inside {{ }} to show the full name.

5fill in blank

hard

Fill all three blanks to create a dictionary in a Jinja2 template showing item names and their prices if price is greater than 10.

Flask

{% set expensive_items = { [1]: [2] for [3] in items if [2] > 10 } %}

Drag options to blanks, or click blank then click option'

Aitem.name

Bitem.price

Citem

Ditems

Attempts:

3 left

💡 Hint

Common Mistakes

Using the list name as loop variable

Mixing keys and values

Incorrect comparison syntax

Use item.name as key, item.price as value, and loop over item in items.

Practice

1. In Flask templates, which syntax correctly inserts the value of a variable named username into the HTML?

easy

A. [[ username ]]

B. {{ username }}

C. {% username %}

D. <% username %>

Solution

1. Step 1: Understand Flask template syntax

   Flask uses Jinja2 templating where variables are inserted using double curly braces {{ variable }}.

2. Step 2: Identify correct variable substitution

   The correct way to show the value of username is {{ username }}.

3. Final Answer:

   {{ username }} -> Option B

4. Quick Check:

   Variable substitution = {{ username }} [OK]

Hint: Use double curly braces {{ }} for variables in Flask templates [OK]

Common Mistakes:

• Using {% %} which is for control statements
• Using brackets like [[ ]] which is not Flask syntax
• Using <% %> which is from other template engines

2. Which of the following is the correct syntax to display a variable age inside a Flask template?

easy

A. {{ age }}

B. {% age %}

C. <%= age %>

D. [[ age ]]

Solution

1. Step 1: Recall Flask variable syntax

   Flask templates use Jinja2 syntax where variables are shown with double curly braces {{ variable }}.

2. Step 2: Match the correct option

   Only {{ age }} correctly shows the variable value.

3. Final Answer:

   {{ age }} -> Option A

4. Quick Check:

   Variable display = {{ age }} [OK]

Hint: Remember: {{ variable }} shows variable value in Flask templates [OK]

Common Mistakes:

• Confusing {% %} for variables instead of control blocks
• Using syntax from other template engines like <%= %>
• Using brackets [[ ]] which Flask does not recognize

3. Given this Flask template snippet:

Hello, {{ user }}!

And the Flask code:

return render_template('template.html', user='Alice')

What will be the rendered output?

medium

A. Hello, {{ user }}!

B. Hello, user!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand variable substitution in template

   The template uses {{ user }} which will be replaced by the value passed from Flask code.

2. Step 2: Check the passed variable value

   The Flask code passes user='Alice', so {{ user }} becomes 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Variable user = Alice [OK]

Hint: Variables in {{ }} show passed values, not literal text [OK]

Common Mistakes:

• Thinking {{ user }} prints literally
• Ignoring the passed variable value
• Confusing variable name with string

4. Identify the error in this Flask template snippet:

Hello, {% user %}!

What will happen when rendering this template?

medium

A. TemplateSyntaxError due to wrong tag usage

B. SyntaxError: invalid syntax

C. It will display the literal text '{% user %}'

D. It will display the value of user variable

Solution

1. Step 1: Understand {% %} usage in Flask templates

   The {% %} syntax is for control statements like loops or conditions, not for variable substitution.

2. Step 2: Identify the error type

   Using {% user %} is invalid and causes a TemplateSyntaxError because 'user' is not a valid control tag.

3. Final Answer:

   TemplateSyntaxError due to wrong tag usage -> Option A

4. Quick Check:

   Wrong tag usage = TemplateSyntaxError [OK]

Hint: Use {{ }} for variables, {% %} only for control blocks [OK]

Common Mistakes:

• Using {% %} for variables instead of {{ }}
• Expecting literal output from {% %} tags
• Ignoring template error messages

5. You want to display a user's full name in a Flask template using two variables: first_name and last_name. Which template code correctly combines them with a space?

hard

A. {{ first_name }} + ' ' + {{ last_name }}

B. {{ first_name, ' ', last_name }}

C. {{ first_name & ' ' & last_name }}

D. {{ first_name ~ ' ' ~ last_name }}

Solution

1. Step 1: Recall string concatenation in Jinja2 templates

   Jinja2 uses the tilde (~) operator to join strings inside {{ }}.

2. Step 2: Evaluate each option

   {{ first_name ~ ' ' ~ last_name }} uses ~ correctly to join first_name, a space, and last_name. {{ first_name }} + ' ' + {{ last_name }} treats + as literal text. {{ first_name, ' ', last_name }} creates a tuple with comma. {{ first_name & ' ' & last_name }} uses invalid & operator.

3. Final Answer:

   {{ first_name ~ ' ' ~ last_name }} -> Option D

4. Quick Check:

   String join in Jinja2 = ~ operator [OK]

Hint: Use ~ to join strings in Flask (Jinja2) templates [OK]

Common Mistakes:

• Placing + outside {{ }} so it prints literally
• Using invalid operators like & or commas
• Trying Python code directly in templates