Template inheritance with base template in Django - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base template in Django.

Django

{% extends '[1]' %}

{% block content %}
<p>Welcome to the homepage!</p>
{% endblock %}

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

Aindex.html

Bbase.html

Chome.html

Dmain.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong filename in the extends tag.

Forgetting to put the filename in quotes.

The {% extends %} tag is used to inherit from a base template. Here, base.html is the common base template.

2fill in blank

medium

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

Django

<body>
  {% block [1] %}
  <!-- Default content -->
  {% endblock %}
</body>

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

Acontent

Bheader

Cfooter

Dsidebar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a block name that does not match the child template.

Forgetting to close the block with {% endblock %}.

The {% block %} tag defines a section that child templates can override. Here, the block is named content.

3fill in blank

hard

Fix the error in the child template to correctly override the 'content' block.

Django

{% extends 'base.html' %}

{% block [1] %}
<h1>Hello, world!</h1>
{% endblock %}

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

Acontent

Bmain

Cfooter

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different block name than the base template.

Forgetting to use the block tag in the child template.

The child template must use the exact block name content to override the base template's block.

4fill in blank

hard

Fill both blanks to create a base template with a block named 'title' and a block named 'content'.

Django

<html>
<head>
  <title>{% block [1] %}My Site{% endblock %}</title>
</head>
<body>
  {% block [2] %}
  <p>Welcome!</p>
  {% endblock %}
</body>
</html>

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

Atitle

Bheader

Ccontent

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up block names.

Not closing blocks properly.

The base template defines a title block for the page title and a content block for the main body content.

5fill in blank

hard

Fill all three blanks to create a child template that extends 'base.html', overrides the 'title' block with 'Home Page', and overrides the 'content' block with a welcome message.

Django

{% extends '[1]' %}

{% block [2] %}Home Page{% endblock %}

{% block [3] %}
<p>Welcome to the home page!</p>
{% endblock %}

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

Abase.html

Btitle

Ccontent

Dhome.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong filename in extends.

Using incorrect block names.

Forgetting to close blocks.

The child template extends base.html, overrides the title block with 'Home Page', and overrides the content block with a welcome message.

Practice

1. What is the main purpose of using {% extends %} in a Django template?

easy

A. To define a new block inside the template

B. To include JavaScript files in the template

C. To inherit the layout and content from a base template

D. To load static files like images or CSS

Solution

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

   This tag tells Django to use another template as the base layout for the current template.

2. Step 2: Compare with other options

   Options B, C, and D describe different template tags or functions unrelated to inheritance.

3. Final Answer:

   To inherit the layout and content from a base template -> Option C

4. Quick Check:

   {% extends %} = inherit base template [OK]

Hint: Remember: extends means 'use base template' [OK]

Common Mistakes:

• Confusing extends with include
• Thinking extends loads static files
• Mixing block and extends tags

2. Which of the following is the correct syntax to define a block named 'content' in a Django template?

easy

A. {% content block %} ... {% endcontent %}

B. {% block 'content' %} ... {% endblock %}

C. {% define content %} ... {% enddefine %}

D. {% block content %} ... {% endblock %}

Solution

1. Step 1: Recall block syntax in Django templates

   The correct syntax uses {% block blockname %} and closes with {% endblock %} without quotes.

2. Step 2: Check each option

   {% block content %} ... {% endblock %} matches the correct syntax. Options A, C, and D use invalid tags. {% block 'content' %} ... {% endblock %} incorrectly uses quotes around the block name.

3. Final Answer:

   {% block content %} ... {% endblock %} -> Option D

4. Quick Check:

   Block syntax = {% block name %} ... {% endblock %} [OK]

Hint: Blocks never use quotes around their names [OK]

Common Mistakes:

• Adding quotes around block names
• Using wrong tag names like define or content block
• Forgetting to close the block with endblock

3. Given the base template

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

and a child template

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

, what will be the rendered output for the content block when rendering the child template?

medium

A. Base Content

B. Child Title

C. Child Content

D. Empty content block

Solution

1. Step 1: Understand block overriding in inheritance

   The child template overrides only the title block, so the content block remains as defined in the base template.

2. Step 2: Determine output for content block

   Since the child does not override content, the base template's Base Content is used.

3. Final Answer:

   Base Content -> Option A

4. Quick Check:

   Unchanged blocks show base content [OK]

Hint: Only overridden blocks change output [OK]

Common Mistakes:

• Assuming all blocks are replaced
• Confusing title block content with content block
• Expecting empty output if block not overridden

4. Identify the error in this child template code:

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

medium

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

B. Missing {% load static %} tag

C. The extends tag must be at the end of the file

D. Block name 'content' is invalid

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: Verify other options

   Missing {% load static %} tag is unrelated to block syntax. The extends tag must be at the end of the file is false; extends must be at the top. Block name 'content' is invalid is incorrect; 'content' is a valid block name.

3. Final Answer:

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

4. Quick Check:

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

Hint: End blocks with just {% endblock %} [OK]

Common Mistakes:

• Adding block name after endblock
• Placing extends tag incorrectly
• Confusing load static with block syntax

5. You have a base template with blocks header, content, and footer. You want a child template to reuse the base layout but add a sidebar inside the content block without losing the original content. Which is the correct way to do this?

hard

A. {% raw %}{% extends 'base.html' %}{% block sidebar %}Sidebar content{% endblock %}{% endraw %}

B. {% raw %}{% extends 'base.html' %}{% block content %}{{ block.super }}Sidebar content{% endblock %}{% endraw %}

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

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

Solution

1. Step 1: Understand how to keep base content in a block

   Using {{ block.super }} inside a block includes the original content from the base template's block.

2. Step 2: Analyze options

   {% raw %}{% extends 'base.html' %}{% block content %}{{ block.super }}
   Sidebar content{% endblock %}{% endraw %} correctly adds sidebar content after the original content. Options B and D replace the content entirely. {% raw %}{% extends 'base.html' %}{% block sidebar %}Sidebar content{% endblock %}{% endraw %} tries to add a new block 'sidebar' which doesn't exist in base, so it won't appear.

3. Final Answer:

   {% extends 'base.html' %}{% block content %}{{ block.super }}
   Sidebar content
   {% endblock %} -> Option B

4. Quick Check:

   Use {{ block.super }} to keep base block content [OK]

Hint: Use {{ block.super }} to keep base block content [OK]

Common Mistakes:

• Overwriting block content without block.super
• Adding blocks not defined in base template
• Forgetting to extend the base template