Template inheritance with extends in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Flask template inheritance?

Given the base template base.html and child template child.html, what will be the final rendered HTML when rendering child.html?

Flask

{% raw %}
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Base Title{% endblock %}</title>
</head>
<body>
    <header>{% block header %}Base Header{% endblock %}</header>
    <main>{% block content %}Base Content{% endblock %}</main>
    <footer>{% block footer %}Base Footer{% endblock %}</footer>
</body>
</html>

<!-- child.html -->
{% extends "base.html" %}

{% block title %}Child Title{% endblock %}

{% block content %}
<p>Child Content</p>
{% endblock %}
{% endraw %}

A <!DOCTYPE html><html lang="en"><head><title>Base Title</title></head><body><header>Base Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>

B <!DOCTYPE html><html lang="en"><head><title>Base Title</title></head><body><header>Base Header</header><main>Base Content</main><footer>Base Footer</footer></body></html>

C <!DOCTYPE html><html lang="en"><head><title>Child Title</title></head><body><header>Child Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>

D <!DOCTYPE html><html lang="en"><head><title>Child Title</title></head><body><header>Base Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>

💡 Hint

Remember that blocks in the child template override blocks with the same name in the base template.

The child template overrides the 'title' and 'content' blocks, so the final output uses 'Child Title' for the title and '

Child Content

' for the main content. The header and footer remain from the base template.

📝 Syntax

intermediate

Which option correctly uses the extends tag in a Flask template?

Select the correct syntax to extend a base template named layout.html in a Flask Jinja2 template.

A {% extends 'layout.html' %}

B {% extend 'layout.html' %}

C {% extends "layout.html" %}

D {% extends layout.html %}

💡 Hint

The extends tag requires quotes around the template name and the correct keyword.

The correct syntax uses the keyword 'extends' and quotes around the template name. Both single and double quotes are valid, but the keyword must be 'extends'.

🔧 Debug

advanced

Why does this Flask template raise a TemplateNotFound error?

Given this child template code, why does Flask raise a TemplateNotFound error when rendering?

Flask

{% raw %}{% extends 'base.htm' %}

{% block content %}
<p>Hello</p>
{% endblock %}{% endraw %}

A The base template filename is misspelled; it should be 'base.html' not 'base.htm'.

B The extends tag must be at the end of the file, not the beginning.

C The block tags are incorrectly nested inside the extends tag.

D Flask requires absolute paths in the extends tag.

💡 Hint

Check the filename spelling carefully.

Flask looks for the exact template filename. Since 'base.htm' does not exist but 'base.html' does, Flask raises TemplateNotFound.

❓ state_output

advanced

What is the output of this nested template inheritance?

Consider three templates: base.html, middle.html extending base.html, and child.html extending middle.html. If base.html defines a block content with 'Base Content', middle.html overrides content with 'Middle Content', and child.html overrides content with 'Child Content', what will be rendered when rendering child.html?

Flask

{% raw %}
<!-- base.html -->
<html><body>{% block content %}Base Content{% endblock %}</body></html>

<!-- middle.html -->
{% extends 'base.html' %}
{% block content %}Middle Content{% endblock %}

<!-- child.html -->
{% extends 'middle.html' %}
{% block content %}Child Content{% endblock %}
{% endraw %}

A <html><body>Middle ContentChild Content</body></html>

B <html><body>Child Content</body></html>

C <html><body>Base Content</body></html>

D <html><body>Middle Content</body></html>

💡 Hint

The most specific child template's block overrides all parent blocks with the same name.

In nested inheritance, the last child template's block content replaces the same block in all parents. So 'Child Content' is rendered.

🧠 Conceptual

expert

What happens if a block is missing in the child template when using extends?

If a child template extends a base template that defines a block named sidebar, but the child template does not override this block, what will be the output in the rendered page?

A Flask will raise a TemplateSyntaxError because the block is missing in the child.

B The <code>sidebar</code> block will be empty in the rendered page.

C The content of the <code>sidebar</code> block from the base template will be used.

D The entire page will fail to render due to missing block override.

💡 Hint

Blocks in base templates provide default content if not overridden.

If a child template does not override a block, the base template's block content is used as default. No error occurs.

Practice

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

easy

A. To inherit the layout from a base template and reuse it

B. To include JavaScript files in the template

C. To define a new CSS style inside the template

D. To create a new Flask route

Solution

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

   This tag is used to inherit from a base template, allowing reuse of common layout parts.

2. Step 2: Differentiate from other template tags

   Other options like including scripts or defining CSS are done differently, not with {% extends %}.

3. Final Answer:

   To inherit the layout from a base template and reuse it -> Option A

4. Quick Check:

   Template inheritance = reuse layout [OK]

Hint: Remember: extends means reuse base layout [OK]

Common Mistakes:

• Confusing extends with including scripts
• Thinking extends creates new routes
• Using extends to add CSS styles

2. Which of the following is the correct syntax to inherit from a base template named base.html?

easy

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

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

C. {% extends 'base.html' %}

D. {% block 'base.html' %}

Solution

1. Step 1: Recall the syntax for template inheritance

   The correct tag to inherit a template is {% extends 'filename' %}.

2. Step 2: Identify incorrect tags

   {% include %} inserts content but does not inherit; {% import %} is for macros; {% block %} defines sections, not inheritance.

3. Final Answer:

   {% extends 'base.html' %} -> Option C

4. Quick Check:

   Extends = inherit base template [OK]

Hint: Use extends, not include, to inherit templates [OK]

Common Mistakes:

• Using include instead of extends
• Confusing import with extends
• Misusing block tag for inheritance

3. Given the base template base.html with a block named content and a child template that extends it and overrides content, what will be displayed when rendering the child template?

medium

A. An error because blocks cannot be overridden

B. The content defined inside the child's content block

C. The content defined inside the base template's content block

D. Both base and child content concatenated automatically

Solution

1. Step 1: Understand block overriding in template inheritance

   The child template replaces the base template's block content with its own block content.

2. Step 2: Clarify behavior of blocks

   Blocks are placeholders in the base template; child templates override them. No automatic concatenation occurs unless explicitly coded.

3. Final Answer:

   The content defined inside the child's content block -> Option B

4. Quick Check:

   Child block overrides base block content [OK]

Hint: Child block content replaces base block content [OK]

Common Mistakes:

• Thinking base block content shows instead
• Expecting automatic concatenation of blocks
• Believing block override causes errors

4. Consider this child template code snippet:

{% extends 'base.html' %}
{% block content %}
Hello World

What is the error in this template?

medium

A. The closing tag should be {% endblock %} instead of

B. The extends tag is missing quotes around the filename

C. The block name should be main not content

D. The p tag cannot be used inside blocks

Solution

1. Step 1: Check block syntax correctness

   Blocks must be closed with {% endblock %}, not with HTML-like closing tags.

2. Step 2: Verify other parts

   The extends tag is correctly quoted; block name can be any valid name; p tags are allowed inside blocks.

3. Final Answer:

   The closing tag should be {% endblock %} instead of -> Option A

4. Quick Check:

   Block ends with endblock tag [OK]

Hint: Close blocks with {% endblock %}, not HTML tags [OK]

Common Mistakes:

• Using HTML closing tags for blocks
• Forgetting quotes in extends (not here though)
• Assuming block names are fixed keywords

5. You have a base template base.html with two blocks: header and content. You want a child template to reuse the base layout but only change the content block, keeping the base header as is. Which is the correct approach?

hard

A. In the child template, extend base.html and redefine only the header block

B. In the child template, extend base.html and redefine both header and content blocks

C. In the child template, do not use extends; copy all base content and change content

D. In the child template, extend base.html and define only the content block; omit the header block

Solution

1. Step 1: Understand block overriding behavior

   If a block is not redefined in the child, the base template's block content is used automatically.

2. Step 2: Apply this to the problem

   To keep the base header, do not redefine the header block in the child; only override content.

3. Final Answer:

   In the child template, extend base.html and define only the content block; omit the header block -> Option D

4. Quick Check:

   Omit block to keep base content [OK]

Hint: Override only blocks you want to change [OK]

Common Mistakes:

• Redefining all blocks unnecessarily
• Copying base template instead of extending
• Overriding wrong block by mistake