Include for reusable fragments in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Flask template using include?

Given the following Flask templates, what will be rendered when main.html is rendered?

base.html:

{% raw %}{% block content %}{% endblock %}{% endraw %}

header.html:

{% raw %}
Welcome!
{% endraw %}

main.html:

{% raw %}{% extends 'base.html' %}{% block content %}{% include 'header.html' %}
Main content here.
{% endblock %}{% endraw %}

A <header><h1>Welcome!</h1></header><p>Main content here.</p>

B <p>Main content here.</p>

C <header>Main content here.</header>

D Error: 'include' tag not found

💡 Hint

Remember that {% raw %}{% include %}{% endraw %} inserts the content of the specified template at that point.

The {% raw %}{% include 'header.html' %}{% endraw %} tag inserts the header.html content inside the content block, so the final rendered HTML includes the header followed by the paragraph.

📝 Syntax

intermediate

Which option correctly includes a reusable fragment in a Flask template?

You want to include a reusable footer fragment stored in footer.html inside your main template. Which of the following is the correct syntax?

A {% raw %}{% import 'footer.html' %}{% endraw %}

B {% raw %}{% require 'footer.html' %}{% endraw %}

C {% raw %}{% extends 'footer.html' %}{% endraw %}

D {% raw %}{% include 'footer.html' %}{% endraw %}

💡 Hint

The tag to insert another template's content is {% raw %}{% include %}{% endraw %}.

Only {% raw %}{% include 'footer.html' %}{% endraw %} correctly inserts the content of footer.html at that point in the template.

🔧 Debug

advanced

Why does this Flask template raise a TemplateNotFound error?

You have this template code:

{% raw %}{% include 'nav.html' %}{% endraw %}

But when rendering, Flask raises TemplateNotFound: nav.html. What is the most likely cause?

A You must use {% raw %}{% extends %}{% endraw %} instead of include.

B The include tag is misspelled.

C The file nav.html is missing from the templates folder.

D Flask does not support including templates.

💡 Hint

Check if the file you want to include exists in the right place.

Flask looks for templates in the templates folder. If nav.html is missing, it raises TemplateNotFound.

❓ state_output

advanced

What is the output when including a template with variables?

Given these templates:

greeting.html:

{% raw %}
Hello, {{ name }}!
{% endraw %}

main.html:

{% raw %}{% include 'greeting.html' %}{% endraw %}

And the Flask view renders main.html with {'name': 'Alice'} as context, what will be the output?

A <p>Hello, Alice!</p>

B <p>Hello, {{ name }}!</p>

C <p>Hello, !</p>

D Error: Variable 'name' not found

💡 Hint

Included templates share the same context as the parent template.

The included template uses the same variables passed to the main template, so {{ name }} is replaced by 'Alice'.

🧠 Conceptual

expert

Why use {% raw %}{% include %}{% endraw %} instead of {% raw %}{% extends %}{% endraw %} for reusable fragments?

In Flask templates, what is the main conceptual difference between {% raw %}{% include %}{% endraw %} and {% raw %}{% extends %}{% endraw %} when building reusable parts?

A {% raw %}{% extends %}{% endraw %} inserts a fragment, while {% raw %}{% include %}{% endraw %} replaces the whole template.

B {% raw %}{% include %}{% endraw %} inserts a fragment inside a template, while {% raw %}{% extends %}{% endraw %} defines a base template to inherit from.

C Both do the same thing but {% raw %}{% include %}{% endraw %} is faster.

D {% raw %}{% include %}{% endraw %} is deprecated and should not be used.

💡 Hint

Think about whether you want to build a whole page layout or just add a small piece.

Extends is for base templates that define structure; include is for inserting reusable pieces inside templates.