Control structures (if, for) in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Flask template render?

Given this Flask Jinja2 template snippet, what will be the rendered HTML output if items = ['apple', 'banana', 'cherry']?

Flask

{% raw %}
<ul>
  {% for item in items %}
    {% if item == 'banana' %}
      <li><strong>{{ item }}</strong></li>
    {% else %}
      <li>{{ item }}</li>
    {% endif %}
  {% endfor %}
</ul>
{% endraw %}

A <ul><li>apple</li><li><strong>banana</strong></li><li>cherry</li></ul>

B <ul><li><strong>apple</strong></li><li>banana</li><li><strong>cherry</strong></li></ul>

C <ul><li><strong>apple</strong></li><li><strong>banana</strong></li><li><strong>cherry</strong></li></ul>

D <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

💡 Hint

Look at the if condition inside the for loop and which item it highlights.

The template loops over each item. Only when the item is 'banana' it wraps it in tags. Others are plain list items.

📝 Syntax

intermediate

Identify the syntax error in this Flask template code

Which option correctly fixes the syntax error in this Flask Jinja2 template snippet?

{% raw %}

  {% for user in users %}
    {% if user.active %}
      
{{ user.name }}
    {% endif %}
  {% endfor %}

{% endraw %}

Assume users is a list of user objects with an active boolean attribute.

Flask

{% raw %}
<ul>
  {% for user in users %}
    {% if user.active %}
      <li>{{ user.name }}</li>
    {% endif %}
  {% endfor %}
</ul>
{% endraw %}

A No change needed; the code is correct as is.

B Add a colon after {% if user.active %} like {% if user.active: %}.

C Replace {% endif %} with {% endfor %} to close the for loop.

D Replace {% for user in users %} with {% for user of users %}.

💡 Hint

Check Jinja2 syntax for control structures carefully.

Jinja2 uses {% endif %} to close if blocks and {% endfor %} to close for loops. The given code correctly closes both blocks. No colon is needed in Jinja2 tags. The 'for ... of' syntax is invalid in Jinja2.

❓ state_output

advanced

What is the output count of list items rendered?

Given this Flask Jinja2 template snippet and numbers = [1, 2, 3, 4, 5], how many <li> elements will be rendered?

{% raw %}

  {% for n in numbers %}
    {% if n % 2 == 0 %}
      
{{ n }}
    {% endif %}
  {% endfor %}

{% endraw %}

Flask

{% raw %}
<ul>
  {% for n in numbers %}
    {% if n % 2 == 0 %}
      <li>{{ n }}</li>
    {% endif %}
  {% endfor %}
</ul>
{% endraw %}

A 3

B 2

C 5

D 0

💡 Hint

Count how many numbers in the list are even.

The template renders a list item only if the number is even. From 1 to 5, the even numbers are 2 and 4, so 2 list items are rendered.

🔧 Debug

advanced

Why does this Flask template raise an error?

Consider this Flask Jinja2 template snippet:

{% raw %}

  {% for item in items %}
    {% if item.is_active %}
      
{{ item.name }}
    {% endif %}
  {% endfor %}

{% endraw %}

If items is a list of dictionaries without the key is_active, what error will occur?

Flask

{% raw %}
<ul>
  {% for item in items %}
    {% if item.is_active %}
      <li>{{ item.name }}</li>
    {% endif %}
  {% endfor %}
</ul>
{% endraw %}

A TypeError: 'list' object is not callable

B KeyError: 'is_active'

C UndefinedError: 'dict object' has no attribute 'is_active'

D No error; renders empty list items.

💡 Hint

Check how Jinja2 accesses dictionary keys vs attributes.

Jinja2 treats dot notation as attribute access. Since dictionaries don't have attributes, it raises UndefinedError when trying to access a missing attribute. KeyError is not raised because dot notation does not access keys directly.

🧠 Conceptual

expert

Which option best describes Jinja2's control flow evaluation order?

In Flask's Jinja2 templates, when rendering nested control structures like for loops and if statements, which statement is true about the evaluation order?

A Jinja2 compiles the entire template and renders all <code>if</code> blocks before any <code>for</code> loops.

B The <code>if</code> statements run independently of <code>for</code> loops and do not affect iteration.

C All <code>if</code> conditions are evaluated first for all items, then the <code>for</code> loop renders the filtered results.

D The outer <code>for</code> loop runs first, then for each iteration the inner <code>if</code> condition is evaluated before rendering content.

💡 Hint

Think about how nested loops and conditions work in normal programming.

Jinja2 processes templates top to bottom. For nested loops and conditions, the outer loop runs first. For each item, the inner if condition is checked before rendering that item. This is standard control flow behavior.

Practice

1. What does the {% if %} statement do in a Flask template?

easy

A. It repeats HTML for each item in a list.

B. It imports another template file.

C. It defines a function in the template.

D. It shows HTML only when a condition is true.

Solution

1. Step 1: Understand the purpose of {% if %}

   The {% if %} statement checks a condition and controls whether some HTML is shown.

2. Step 2: Compare with other options

   {% for %} repeats HTML, functions and imports are not done with {% if %}.

3. Final Answer:

   It shows HTML only when a condition is true. -> Option D

4. Quick Check:

   {% if %} controls conditional display [OK]

Hint: Remember: if = condition, for = repeat [OK]

Common Mistakes:

• Confusing if with for loop
• Thinking if defines functions
• Assuming if imports templates

2. Which of the following is the correct syntax to start a for loop in a Flask template?

easy

A. {% for item in list %}

B. {% loop item in list %}

C. {% foreach item in list %}

D. {% iterate item over list %}

Solution

1. Step 1: Recall Flask template for loop syntax

   The correct syntax uses {% for variable in iterable %}.

2. Step 2: Check options for exact match

   Only {% for item in list %} matches the correct syntax exactly.

3. Final Answer:

   {% for item in list %} -> Option A

4. Quick Check:

   Flask uses {% for variable in iterable %} [OK]

Hint: For loops use 'for variable in list' syntax [OK]

Common Mistakes:

• Using 'loop' or 'foreach' instead of 'for'
• Using 'over' instead of 'in'
• Missing curly braces or percent signs

3. Given this Flask template snippet:

{% for color in ['red', 'green', 'blue'] %}
  
{{ color }}
{% endfor %}

What will be the rendered HTML output?

medium

A. red green blue

B.

color

color

color

C.

red

green

blue

D. SyntaxError

Solution

1. Step 1: Understand the for loop iteration

   The loop runs over the list ['red', 'green', 'blue'], assigning each to 'color'.

2. Step 2: Render each item inside <p> tags

   Each iteration outputs <p> followed by the color name and </p>.

3. Final Answer:

   <p>red</p><p>green</p><p>blue</p> -> Option C

4. Quick Check:

   Loop prints each color in <p> tags [OK]

Hint: For loops output each item wrapped in HTML [OK]

Common Mistakes:

• Printing the variable name instead of its value
• Missing endfor tag causing syntax error
• Expecting plain text without tags

4. Identify the error in this Flask template code:

{% for user in users %}
  
{{ user.name }}
{% endfor %}

Assuming users is an empty list, what happens?

medium

A. SyntaxError because endfor is missing.

B. No output is shown because the loop does not run.

C. Runtime error because user.name is undefined.

D. Outputs one empty <p></p> tag.

Solution

1. Step 1: Check loop behavior with empty list

   When users is empty, the for loop body does not execute at all.

2. Step 2: Confirm no output or errors occur

   No iterations means no <p> tags output, and no errors happen.

3. Final Answer:

   No output is shown because the loop does not run. -> Option B

4. Quick Check:

   Empty list means zero loop runs, zero output [OK]

Hint: Empty lists skip for loops silently [OK]

Common Mistakes:

• Expecting an error when list is empty
• Thinking endfor is missing
• Assuming output of empty tags

5. You want to display a message "No items found" if a list items is empty, otherwise list each item inside <li> tags within a <ul></ul>. Which Flask template code correctly does this?

hard

A. {% if items %}

{% for item in items %}
• {{ item }}
{% endfor %}

{% else %}

No items found

{% endif %}

B. {% for item in items %}

{{ item }}

{% else %}

No items found

{% endfor %}

C. {% if items.length > 0 %}

{% for item in items %}
• {{ item }}
{% endfor %}

{% endif %}

No items found

D. {% if items is empty %}

No items found

{% else %}

{% for item in items %}
• {{ item }}
{% endfor %}

{% endif %}

Solution

1. Step 1: Use if to check if list has items

   {% if items %}
   {% for item in items %}
   • {{ item }}
   {% endfor %}
   {% else %}

   No items found

   {% endif %} uses {% if items %} which is true if list is not empty.

2. Step 2: Use else to show message when empty

   {% if items %}
   {% for item in items %}
   • {{ item }}
   {% endfor %}
   {% else %}

   No items found

   {% endif %} correctly uses {% else %} to show "No items found" if empty.

3. Final Answer:

   Uses `{% if items %}` with `<ul>` and `{% else %}` for empty case -> Option A

4. Quick Check:

   Use if-else with for loop for empty list check [OK]

Hint: Use if-else around for loop to handle empty lists [OK]

Common Mistakes:

• Using else inside for loop incorrectly
• Checking length with .length (not valid in Jinja)
• Using 'is empty' which is not valid syntax