Block definitions and overriding in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a block named 'content' in a base template.

Flask

{% block [1] %}Default content{% endblock %}

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

Afooter

Bheader

Ccontent

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a block name that doesn't match the child template's block.

The block name must match the one you want to override. Here, 'content' is the block defined.

2fill in blank

medium

Complete the child template code to override the 'content' block.

Flask

{% extends 'base.html' %}
{% block [1] %}Overridden content{% endblock %}

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

Afooter

Bsidebar

Cheader

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Overriding a block with a different name than defined in the base template.

To override a block, use the exact block name defined in the base template, here 'content'.

3fill in blank

hard

Fix the error in the child template to properly override the 'title' block.

Flask

{% extends 'base.html' %}
{% block [1] %}My Page Title{% endblock %}

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

Atitle

Bcontent

Cheader

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong block name like 'content' instead of 'title'.

The block to override for the page title is named 'title' in the base template.

4fill in blank

hard

Fill both blanks to define and override a block named 'sidebar' with default and new content.

Flask

Base template:
{% block [1] %}Default sidebar{% endblock %}

Child template:
{% extends 'base.html' %}
{% block [2] %}Custom sidebar content{% endblock %}

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

Asidebar

Bcontent

Cheader

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using different block names in base and child templates.

The block name must be the same in both base and child templates to override correctly.

5fill in blank

hard

Fill all three blanks to create a base template with 'header' and 'footer' blocks and override only the 'footer' block in the child template.

Flask

Base template:
{% block [1] %}Site Header{% endblock %}
{% block [2] %}Site Footer{% endblock %}

Child template:
{% extends 'base.html' %}
{% block [3] %}Custom Footer{% endblock %}

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

Aheader

Bfooter

Ccontent

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Overriding the wrong block or mismatching block names.

The base template defines 'header' and 'footer' blocks. The child overrides only the 'footer' block.