0
0
Flaskframework~20 mins

HTML email templates in Flask - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
HTML Email Templates Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the rendered output of this Flask email template?
Given this Flask Jinja2 email template, what will be the rendered HTML output when user_name='Alice' and items=['Book', 'Pen']?
Flask
{% raw %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Order</title></head>
<body>
  <h1>Hello {{ user_name }}!</h1>
  <p>Your order includes:</p>
  <ul>
  {% for item in items %}
    <li>{{ item }}</li>
  {% endfor %}
  </ul>
</body>
</html>
{% endraw %}
A<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Order</title></head><body><h1>Hello Alice!</h1><p>Your order includes:</p><ul><li>Book</li><li>Pen</li></ul></body></html>
B<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Order</title></head><body><h1>Hello {{ user_name }}!</h1><p>Your order includes:</p><ul><li>{{ item }}</li></ul></body></html>
C<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Order</title></head><body><h1>Hello Alice!</h1><p>Your order includes:</p><ul><li>Book</li></ul></body></html>
D<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Order</title></head><body><h1>Hello Alice!</h1><p>Your order includes:</p><ul></ul></body></html>
Attempts:
2 left
💡 Hint
Remember how Jinja2 loops work to render each item in the list.
📝 Syntax
intermediate
2:00remaining
Which option causes a syntax error in this Flask email template?
Identify which option contains a syntax error in the Jinja2 template for an email body.
Flask
{% raw %}
<html>
<body>
  <p>Dear {{ user }},</p>
  {% if items %}
    <ul>
    {% for item in items %}
      <li>{{ item }}</li>
    {% endfor %}
    </ul>
  {% else %}
    <p>No items ordered.</p>
  {% endif %}
</body>
</html>
{% endraw %}
A}% fidne %{ >p/<.deredro smeti oN>p< }% esle %{ >lu/< }% rofdne %{ >il/<}} meti {{>il< }% smeti ni meti rof %{ >lu< }% smeti fi %{
B{% if items %} <ul> {% for item in items %} <li>{{ item }}</li> {% endfor %} </ul> {% else %} <p>No items ordered.</p> {% endif %}
C{% if items %} <ul> {% for item in items %} <li>{{ item }}</li> {% endfor %} </ul> {% else %} <p>No items ordered.</p> {% end %}
D% if items %} <ul> {% for item in items %} <li>{{ item }}</li> {% endfor %} </ul> {% else %} <p>No items ordered.</p> {% endif %}
Attempts:
2 left
💡 Hint
Check the closing tags for Jinja2 control structures carefully.
❓ state_output
advanced
2:00remaining
What is the value of the variable email_body after rendering?
Given this Flask code snippet that renders an email template, what is the value of email_body?
Flask
from flask import render_template_string

template = '''
<html>
<body>
  <h2>Welcome {{ user }}!</h2>
  {% if discount %}
    <p>You have a {{ discount }}% discount.</p>
  {% else %}
    <p>No discounts available.</p>
  {% endif %}
</body>
</html>
'''

email_body = render_template_string(template, user='Bob', discount=0)
A<html><body><h2>Welcome Bob!</h2></body></html>
B<html><body><h2>Welcome Bob!</h2><p>You have a 0% discount.</p></body></html>
C<html><body><h2>Welcome {{ user }}!</h2><p>No discounts available.</p></body></html>
D<html><body><h2>Welcome Bob!</h2><p>No discounts available.</p></body></html>
Attempts:
2 left
💡 Hint
In Jinja2, 0 is treated as False in conditions. Check how the if statement evaluates.
🔧 Debug
advanced
2:00remaining
Why does this Flask email template render an empty list?
This Flask email template is supposed to list items, but the output shows an empty
    . What is the cause?
Flask
{% raw %}
<ul>
{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}
</ul>
{% endraw %}

# Flask render call:
# render_template_string(template, items=None)
AThe variable 'items' is None, so the loop does not run, resulting in an empty list.
BThe template syntax is incorrect; the for loop is missing a colon.
CThe variable 'items' is a string, so it renders each character as a list item.
DThe template engine does not support loops in email templates.
Attempts:
2 left
💡 Hint
Check the value passed to 'items' and how Jinja2 handles None in loops.
🧠 Conceptual
expert
2:00remaining
Which option correctly explains why inline CSS is preferred in HTML email templates?
Why do most HTML email templates use inline CSS styles instead of external or embedded styles?
ABecause inline CSS reduces the email size significantly compared to embedded styles.
BBecause many email clients strip out or ignore <style> tags and external CSS, inline styles ensure consistent rendering.
CBecause inline CSS allows JavaScript to manipulate styles dynamically in emails.
DBecause inline CSS is easier to write and maintain than external stylesheets.
Attempts:
2 left
💡 Hint
Think about how email clients handle CSS for security and compatibility.