Variable substitution syntax in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Flask template code?

Given the Flask template snippet below, what will be rendered when name = 'Alice' is passed to the template?

Flask

Hello, {{ name }}!

A Hello, name!

B Hello, {{ name }}!

C Hello, !

D Hello, Alice!

💡 Hint

Remember that double curly braces {{ }} are used to insert variable values in Flask templates.

In Flask templates, {{ name }} is replaced by the value of the variable 'name'. So if name is 'Alice', the output is 'Hello, Alice!'.

❓ component_behavior

intermediate

What happens if a variable is missing in Flask template substitution?

Consider this Flask template code:
User: {{ username }}
If the variable username is not provided in the template context, what will be rendered?

A User: {{ username }}

B User:

C User: None

D Template rendering error

💡 Hint

Flask's template engine replaces missing variables with empty strings by default.

If a variable is missing, Flask's Jinja2 template engine inserts an empty string instead of raising an error or showing the variable name.

🔧 Debug

advanced

Identify the error in this Flask template variable substitution

What error will occur when rendering this Flask template?
Hello, {{ user.name }!

A SyntaxError due to missing closing brace

B NameError because 'user' is undefined

C No error, renders 'Hello, '

D TypeError because 'user' is not an object

💡 Hint

Check the syntax of the variable substitution braces carefully.

The template has a missing closing curly brace '}}' after 'user.name'. This causes a syntax error during template rendering.

❓ state_output

advanced

What is the output of this Flask template with filters?

Given the Flask template:
{{ message|upper }}
and the context {'message': 'hello world'}, what is the rendered output?

A HELLO WORLD

B {{ message|upper }}

C hello world

D Hello World

💡 Hint

The filter 'upper' converts text to uppercase.

The 'upper' filter changes all letters to uppercase, so 'hello world' becomes 'HELLO WORLD'.

🧠 Conceptual

expert

Which option correctly escapes HTML in Flask variable substitution?

In Flask templates, how does variable substitution handle HTML special characters by default?
Given text = 'bold', what will {{ text }} render as?

A SyntaxError

B <b>bold</b>

C &lt;b&gt;bold&lt;/b&gt;

D &amp;lt;b&amp;gt;bold&amp;lt;/b&amp;gt;

💡 Hint

Flask templates escape HTML characters to prevent code injection by default.

Flask's Jinja2 escapes HTML special characters like < and > to their safe equivalents < and > to avoid rendering raw HTML.

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