Template inheritance with extends in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base template in Flask.

Flask

{% [1] 'base.html' %}

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

Aextends

Binclude

Cimport

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'include' instead of 'extends' will insert the template but not inherit.

Using 'block' or 'import' are incorrect for extending templates.

The {% extends %} tag is used to inherit from a base template in Flask.

2fill in blank

medium

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

Flask

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

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

Aheader

Bfooter

Ctitle

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated block names like 'header' or 'footer' when the main content block is 'content'.

Blocks define sections that child templates can override. 'content' is a common block name.

3fill in blank

hard

Fix the error in the code to correctly extend the base template and define a block.

Flask

{% [1] 'base.html' %}
{% block content %}
<p>Hello!</p>
{% endblock %}

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

Aextends

Binclude

Cimport

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'include' instead of 'extends' causes the template not to inherit.

The correct tag to inherit a template is 'extends'.

4fill in blank

hard

Fill both blanks to create a child template that extends 'layout.html' and overrides the 'title' block.

Flask

{% [1] 'layout.html' %}
{% block [2] %}My Page Title{% endblock %}

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

Aextends

Bcontent

Ctitle

Dinclude

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'include' instead of 'extends' for inheritance.

Overriding the wrong block name like 'content' instead of 'title'.

Use 'extends' to inherit and 'title' to override the title block.

5fill in blank

hard

Fill all three blanks to extend 'base.html', override 'content' block, and add a paragraph inside.

Flask

{% [1] 'base.html' %}
{% block [2] %}
<p>[3]</p>
{% endblock %}

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

Aextends

Bcontent

CWelcome to my site!

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong block names or missing the extends tag.

Putting text outside the block tags.

Use 'extends' to inherit, 'content' block to override main content, and add the paragraph text.