Include for reusable fragments in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include a reusable header fragment in a Flask Jinja2 template.

Flask

{% [1] 'header.html' %}

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

Ainclude

Bimport

Cextends

Dinsert

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'extends' instead of 'include' to insert fragments.

Trying to use 'import' which is for macros, not templates.

Using 'insert' which is not a valid Jinja2 tag.

In Flask Jinja2 templates, {% include 'filename' %} is used to insert reusable fragments like headers or footers.

2fill in blank

medium

Complete the code to include a footer fragment inside the main template.

Flask

<footer>{% [1] 'footer.html' %}</footer>

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

Aextends

Bimport

Cembed

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'extends' which is for template inheritance, not fragments.

Using 'import' which is for macros, not HTML fragments.

Using 'embed' which is not a valid Jinja2 tag.

The include tag inserts the content of footer.html inside the footer element.

3fill in blank

hard

Fix the error in the code to correctly include a navigation bar fragment.

Flask

{% [1] 'navbar.html' %}

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

Aimport

Bextends

Cinclude

Drequire

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'extends' which is for base templates, not fragments.

Using 'import' which is for macros, not HTML includes.

Using 'require' which is not a Jinja2 tag.

The correct tag to insert reusable HTML fragments is include. Using extends or others causes errors.

4fill in blank

hard

Fill both blanks to include a sidebar fragment and pass a variable to it.

Flask

{% [1] 'sidebar.html' with [2]=user %}

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

Ainclude

Bimport

Ccontext

Dextends

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'import' instead of 'include' for HTML fragments.

Passing variables incorrectly without 'with' keyword.

Using 'extends' which is for template inheritance.

Use include to insert the sidebar fragment and with to pass variables. The variable name follows 'with'.

5fill in blank

hard

Fill all three blanks to include a reusable card fragment with a title and content variables.

Flask

{% [1] 'card.html' with [2]=title, [3]=content %}

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

Ainclude

Btitle

Ccontent

Dimport

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'import' instead of 'include' for HTML fragments.

Swapping variable names or missing one variable.

Not using 'with' to pass variables.

Use include to insert the card fragment and pass title and content variables using with.