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.

Practice

1. What is the main purpose of using {% include %} in Flask templates?

easy

A. To create new routes in Flask

B. To define variables in templates

C. To insert reusable HTML fragments into templates

D. To execute Python code inside templates

Solution

1. Step 1: Understand the role of {% include %}

   This tag is used to insert reusable HTML parts into templates to avoid repetition.

2. Step 2: Compare with other options

   Defining variables, creating routes, or executing Python code are not done with {% include %}.

3. Final Answer:

   To insert reusable HTML fragments into templates -> Option C

4. Quick Check:

   Reusable HTML insertion = A [OK]

Hint: Remember: include means insert reusable HTML [OK]

Common Mistakes:

• Confusing include with variable definition
• Thinking include creates routes
• Assuming include runs Python code

2. Which of the following is the correct syntax to include a reusable template named header.html inside another template?

easy

A. {% include 'header.html' %}

B. {% import 'header.html' %}

C. {{ include('header.html') }}

D. {% extend 'header.html' %}

Solution

1. Step 1: Recall the correct syntax for including templates

   The correct syntax uses {% include 'filename' %} with quotes around the filename.

2. Step 2: Eliminate incorrect options

   {% import %} is for macros, {{ include() }} is invalid, and {% extend %} is for template inheritance.

3. Final Answer:

   {% include 'header.html' %} -> Option A

4. Quick Check:

   Include syntax = {% include 'file' %} [OK]

Hint: Use {% include 'file.html' %} with quotes [OK]

Common Mistakes:

• Using {% import %} instead of {% include %}
• Trying to call include as a function {{ include() }}
• Confusing include with extend

3. Given the following templates, what will be rendered when base.html is rendered?

base.html:
<html>
  <body>
    {% include 'nav.html' %}
    <h1>Welcome</h1>
  </body>
</html>

nav.html:
<nav>Menu</nav>

medium

A. <nav>Menu</nav><h1>Welcome</h1>

B. <html><body><h1>Welcome</h1></body></html>

C. Error: nav.html not found

D. <html><body><nav>Menu</nav><h1>Welcome</h1></body></html>

Solution

1. Step 1: Understand how {% include %} works

   The {% include 'nav.html' %} inserts the content of nav.html exactly where the tag is placed.

2. Step 2: Combine the templates

   In base.html, the <nav>Menu</nav> from nav.html appears before the <h1>Welcome</h1> inside the body.

3. Final Answer:

   <html><body><nav>Menu</nav><h1>Welcome</h1></body></html> -> Option D

4. Quick Check:

   Include inserts nav.html content inline [OK]

Hint: Include inserts file content exactly where placed [OK]

Common Mistakes:

• Ignoring the included file content
• Expecting an error if file exists
• Thinking include replaces whole template

4. What is the error in this template snippet?

{% include header.html %}

medium

A. Filename should be a variable, not a string

B. Missing quotes around the filename

C. Incorrect tag name, should be import

D. Include tag cannot be used inside templates

Solution

1. Step 1: Check syntax for include tag

   The filename must be a string literal enclosed in quotes, like 'header.html'.

2. Step 2: Identify the error

   Here, header.html is unquoted, causing a syntax error.

3. Final Answer:

   Missing quotes around the filename -> Option B

4. Quick Check:

   Filename must be quoted in include [OK]

Hint: Always put quotes around filenames in include [OK]

Common Mistakes:

• Omitting quotes around filename
• Using import instead of include
• Thinking include is invalid in templates

5. You want to create a reusable footer for your Flask app. Which approach correctly uses {% include %} to add footer.html to multiple pages and ensures easy updates?

hard

A. Add {% include 'footer.html' %} in each page template where footer is needed

B. Copy footer HTML code into every page template manually

C. Use {% extend 'footer.html' %} in each page template

D. Write footer HTML inside the Flask route function

Solution

1. Step 1: Understand reusable fragments with include

   Using {% include 'footer.html' %} inserts the footer code wherever needed, keeping code DRY.

2. Step 2: Compare other options

   Copying code manually duplicates it, {% extend %} is for inheritance, and writing HTML in route mixes logic and presentation.

3. Final Answer:

   Add {% include 'footer.html' %} in each page template where footer is needed -> Option A

4. Quick Check:

   Include footer in templates for easy updates [OK]

Hint: Use include tag in templates to reuse footer [OK]

Common Mistakes:

• Copy-pasting footer code instead of including
• Using extend instead of include for fragments
• Mixing HTML in Python route code