Block definitions and overriding in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Flask template inheritance?

Given the base template defines a block and the child template overrides it, what will the final rendered HTML output be?

Flask

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

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

A <html>\n <body>\n Child Content\n </body>\n</html>

B <html>\n <body>\n Base Content\n </body>\n</html>

C <html>\n <body>\n {% block content %}Child Content{% endblock %}\n </body>\n</html>

D <html>\n <body>\n {% block content %}Base Content{% endblock %}\n </body>\n</html>

💡 Hint

Remember that child templates replace blocks defined in the base template.

The child template overrides the content block, so the rendered output shows "Child Content" inside the body.

📝 Syntax

intermediate

Which option correctly overrides a block in Flask Jinja2?

Identify the correct syntax to override a block named header in a child template.

A {% block header %}New Header%

B {% override header %}New Header{% endoverride %}

C {% block header %}New Header{% endblock %}

D {% block header %}New Header{% endblock

💡 Hint

Blocks must start with {% block name %} and end with {% endblock %}.

Option C uses the correct Jinja2 syntax for defining and overriding blocks. Options A, B, and D have invalid syntax.

🔧 Debug

advanced

Why does this Flask template raise a TemplateSyntaxError?

Examine the child template code below. Why does it cause a TemplateSyntaxError when rendering?

Flask

{% raw %}
{% extends 'base.html' %}
{% block content %}
  <p>Welcome!</p>
{% endblock content %}
{% endraw %}

A Because the block content must be empty

B Because the block end tag should be {% endblock %} without the block name

C Because the block name 'content' is invalid

D Because the extends tag must be at the end of the file

💡 Hint

Check the syntax rules for ending blocks in Jinja2.

Jinja2 requires the block to be closed with {% endblock %} only. Adding the block name after endblock causes a syntax error.

❓ state_output

advanced

What is the output of this nested block override in Flask templates?

Given the following base and child templates, what will be the rendered output?

Flask

{% raw %}
<!-- base.html -->
<html>
  <body>
    {% block main %}
      Main Base
      {% block sidebar %}Sidebar Base{% endblock %}
    {% endblock %}
  </body>
</html>

<!-- child.html -->
{% extends 'base.html' %}
{% block main %}
  Main Child
  {% block sidebar %}Sidebar Child{% endblock %}
{% endblock %}
{% endraw %}

A <html>\n <body>\n Main Base\n Sidebar Base\n </body>\n</html>

B <html>\n <body>\n Main Child\n Sidebar Base\n </body>\n</html>

C <html>\n <body>\n Main Base\n Sidebar Child\n </body>\n</html>

D <html>\n <body>\n Main Child\n Sidebar Child\n </body>\n</html>

💡 Hint

Remember that nested blocks can be overridden independently in child templates.

The child template overrides both main and the nested sidebar block, so both show the child's content.

🧠 Conceptual

expert

Which statement about Flask Jinja2 block overriding is TRUE?

Choose the correct statement about how block overriding works in Flask Jinja2 templates.

A Blocks in child templates completely replace the base block content unless <code>super()</code> is called inside the block.

B A child template can override a block defined in the base template, but cannot extend the base block content.

C Blocks can only be overridden if they are defined at the top level of the base template, not nested inside other blocks.

D If a block is not overridden in the child template, it will cause a rendering error.

💡 Hint

Think about how to include base block content when overriding.

In Jinja2, overriding a block replaces the base block content entirely unless super() is used to include the original content. Blocks can be nested and do not cause errors if not overridden.

Practice

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

easy

A. To include external CSS files

B. To define sections that child templates can override

C. To write Python code inside templates

D. To create comments in the template

Solution

1. Step 1: Understand block usage in Flask templates

   The {% block %} tag defines a section in a base template that child templates can replace or extend.

2. Step 2: Identify the purpose of blocks

   Blocks allow flexible template inheritance by letting child templates override specific parts without rewriting the whole template.

3. Final Answer:

   To define sections that child templates can override -> Option B

4. Quick Check:

   Blocks = override sections [OK]

Hint: Blocks mark replaceable sections in templates [OK]

Common Mistakes:

• Confusing blocks with comments
• Thinking blocks run Python code
• Using blocks to include CSS

2. Which of the following is the correct syntax to override a block named content in a child template?

easy

A. {% block content %}New content{% endblock %}

B. {% extends content %}New content{% endextends %}

C. {% override content %}New content{% endoverride %}

D. {% include content %}New content{% endinclude %}

Solution

1. Step 1: Recall block override syntax

   To override a block, use {% block block_name %}...{% endblock %} in the child template.

2. Step 2: Check each option

   Only {% block content %}New content{% endblock %} uses the correct {% block %} and {% endblock %} tags with the block name.

3. Final Answer:

   {% block content %}New content{% endblock %} -> Option A

4. Quick Check:

   Override block = {% block %}...{% endblock %} [OK]

Hint: Override blocks with {% block name %}...{% endblock %} [OK]

Common Mistakes:

• Using {% extends %} instead of {% block %} to override
• Using non-existent tags like {% override %}
• Confusing {% include %} with block override

3. Given the base template base.html with:

{% raw %}{% block title %}Base Title{% endblock %}{% endraw %}

and child template child.html with:

{% raw %}{% extends 'base.html' %}{% block title %}Child Title{% endblock %}{% endraw %}

What will be displayed in the title block when rendering child.html?

medium

A. Base Title

B. Base TitleChild Title

C. Child Title

D. An error occurs

Solution

1. Step 1: Understand template inheritance

   The child template extends the base and overrides the title block.

2. Step 2: Determine which block content is used

   Since the child overrides the block, the content shown is from the child: "Child Title".

3. Final Answer:

   Child Title -> Option C

4. Quick Check:

   Child block overrides base block [OK]

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

Common Mistakes:

• Assuming base block content shows instead
• Thinking both contents concatenate automatically
• Expecting a syntax error

4. Identify the error in this child template code:

{% raw %}{% extends 'base.html' %}{% block content %}Hello{% endblock content %}{% endraw %}

medium

A. Incorrect block closing tag; should be {% endblock %} not {% endblock content %}

B. Missing {% block %} tag

C. Incorrect extends syntax

D. No error; code is correct

Solution

1. Step 1: Check block closing syntax

   The correct way to close a block is with {% endblock %} without repeating the block name.

2. Step 2: Identify the error in the code

   The code uses {% endblock content %}, which is invalid and causes a syntax error.

3. Final Answer:

   Incorrect block closing tag; should be {% endblock %} not {% endblock content %} -> Option A

4. Quick Check:

   Block ends with {% endblock %} only [OK]

Hint: Close blocks with {% endblock %} only, no name [OK]

Common Mistakes:

• Adding block name in endblock tag
• Omitting {% block %} tag
• Wrong quotes in extends

5. You have a base template with two blocks:

{% raw %}{% block header %}Base Header{% endblock %}{% block footer %}Base Footer{% endblock %}{% endraw %}

You want a child template to override only the footer block but keep the base header. Which is the correct child template code?

hard

A. {% raw %}{% extends 'base.html' %}{% block header %}Base Header{% endblock %}{% block footer %}Child Footer{% endblock %}{% endraw %}

B. {% raw %}{% extends 'base.html' %}{% block header %}Child Header{% endblock %}{% endraw %}

C. {% raw %}{% block footer %}Child Footer{% endblock %}{% endraw %}

D. {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %}

Solution

1. Step 1: Understand block overriding behavior

   Only blocks defined in the child template override the base. Blocks not overridden use base content.

2. Step 2: Check which blocks are overridden

   {% raw %}{% extends 'base.html' %}{% block footer %}Child Footer{% endblock %}{% endraw %} overrides only footer, so header remains from base.

3. Final Answer:

   {% extends 'base.html' %}{% block footer %}Child Footer{% endblock %} -> Option D

4. Quick Check:

   Override only needed blocks in child [OK]

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

Common Mistakes:

• Overriding blocks unnecessarily
• Forgetting {% extends %} in child
• Defining blocks without extends