Template filters in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply the 'upper' filter in a Flask template.

Flask

{{ '{{ name[1]' }} }}

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

A|upper

B|lower

C|title

D|capitalize

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong filter name like 'lower' or 'title' instead of 'upper'.

Forgetting the pipe symbol before the filter.

The upper filter converts text to uppercase in Flask templates.

2fill in blank

medium

Complete the code to format a number with two decimal places using the 'format' filter.

Flask

{{ '{{ price[1]' }} }}

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

A|format('%.3f')

B|format('%.2f')

C|format('%.1f')

D|format('%.0f')

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong number of decimal places in the format string.

Forgetting to include the format string inside parentheses and quotes.

The format('%.2f') filter formats a number to two decimal places in Flask templates.

3fill in blank

hard

Fix the error in the code to safely display HTML content using the 'safe' filter.

Flask

{{ '{{ content[1]' }} }}

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

A|safe

B|striptags

C|escape

D|replace('<', '&lt;')

Attempts:

3 left

💡 Hint

Common Mistakes

Using escape which does the opposite by escaping HTML.

Not using any filter and expecting HTML to render.

The safe filter tells Flask not to escape HTML tags, so the content renders as HTML.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension in a Flask template that filters items with value greater than 10.

Flask

{% raw %}{% set filtered = {key: value for key, value in items.items() if value [1] 10} %}{% endraw %}

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

A!=

B<

C==

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using < or == which filter different values.

Forgetting to use a comparison operator.

The operator > filters items where the value is greater than 10.

5fill in blank

hard

Fill all three blanks to create a Flask template expression that converts a string to lowercase, then replaces spaces with dashes, and finally trims whitespace.

Flask

{{ '{{ text[1][2][3]' }} }}

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

A|lower

B|replace(' ', '-')

C|trim

D|upper

Attempts:

3 left

💡 Hint

Common Mistakes

Using upper instead of lower.

Not chaining filters in the correct order.

Forgetting to include quotes inside the replace filter.

This chain of filters first makes the text lowercase, then replaces spaces with dashes, and finally removes whitespace from the ends.

Practice

1. What does the | upper filter do in a Flask template?

easy

A. Truncates the text to a specified length

B. Rounds a number to the nearest integer

C. Formats a date to a readable string

D. Converts the text to uppercase letters

Solution

1. Step 1: Understand the purpose of the upper filter

   The upper filter changes all letters in a string to uppercase.

2. Step 2: Compare with other filters

   Other filters like round, truncate, and date formatting do different tasks unrelated to letter case.

3. Final Answer:

   Converts the text to uppercase letters -> Option D

4. Quick Check:

   upper = uppercase text [OK]

Hint: Remember: upper means all caps text [OK]

Common Mistakes:

• Confusing upper with round or truncate
• Thinking upper formats dates
• Using upper on numbers expecting rounding

2. Which of the following is the correct syntax to apply the round filter to a variable price in a Flask template?

easy

A. {{ price | round(2) }}

B. {{ round(price, 2) }}

C. {{ price.round(2) }}

D. {{ price | round:2 }}

Solution

1. Step 1: Recall Flask template filter syntax

   Filters are applied using the pipe symbol | followed by the filter name and optional arguments in parentheses.

2. Step 2: Identify the correct syntax for round

   The correct syntax is {{ price | round(2) }}. Other options either misuse method call syntax or wrong separator.

3. Final Answer:

   {{ price | round(2) }} -> Option A

4. Quick Check:

   Filter syntax uses pipe and parentheses [OK]

Hint: Use pipe (|) then filter name with parentheses [OK]

Common Mistakes:

• Using dot notation like a method call
• Using colon instead of parentheses for arguments
• Calling Python functions directly inside templates

3. Given this Flask template snippet:

{{ 'hello world' | truncate(8) }}

What will be the output rendered on the webpage?

medium

A. hello w

B. hello wo...

C. hello worl

D. hello world

Solution

1. Step 1: Understand the truncate filter behavior

   The truncate(8) filter shortens the string to 8 characters including the ellipsis ....

2. Step 2: Calculate the truncated output

   It keeps 5 characters from the original string and adds ... to make total length 8: "hello wo" + "..." = "hello wo...".

3. Final Answer:

   hello wo... -> Option B

4. Quick Check:

   truncate(8) = 5 chars + ... [OK]

Hint: truncate(n) includes ... in total length n [OK]

Common Mistakes:

• Ignoring the ellipsis length
• Assuming truncate cuts exactly n characters
• Confusing truncate with slice or substring

4. What is wrong with this Flask template code?

{{ username | upper() }}

It causes an error when rendering. Why?

medium

A. The variable username must be a number for upper

B. The upper filter does not exist in Flask

C. Filters should not have parentheses when no arguments are passed

D. The pipe symbol | is missing

Solution

1. Step 1: Check filter usage syntax

   Filters without arguments should be used without parentheses, like {{ username | upper }}.

2. Step 2: Identify the cause of error

   Using parentheses without arguments causes a syntax error in Flask templates.

3. Final Answer:

   Filters should not have parentheses when no arguments are passed -> Option C

4. Quick Check:

   No parentheses for no-arg filters [OK]

Hint: No parentheses for filters without arguments [OK]

Common Mistakes:

• Adding empty parentheses to filters
• Thinking all filters require parentheses
• Confusing filters with Python function calls

5. You want to display a date variable post_date in your Flask template as "April 05, 2024". Which filter usage is correct to achieve this format?

hard

A. {{ post_date | date('%B %d, %Y') }}

B. {{ post_date | format_date('MMMM dd, yyyy') }}

C. {{ post_date | datetime('%B %d, %Y') }}

D. {{ post_date | strftime('%B %d, %Y') }}

Solution

1. Step 1: Identify the correct Flask template filter for date formatting

   The date filter formats dates using Python's strftime format codes.

2. Step 2: Match the format string to desired output

   The format '%B %d, %Y' produces "April 05, 2024". Other options use incorrect filter names or format styles.

3. Final Answer:

   {{ post_date | date('%B %d, %Y') }} -> Option A

4. Quick Check:

   Date filter + strftime format = {{ post_date | date('%B %d, %Y') }} [OK]

Hint: Use date filter with Python strftime format [OK]

Common Mistakes:

• Using non-existent filters like format_date
• Confusing JavaScript date formats with Python
• Using strftime filter which Flask does not provide