Challenge - 5 Problems
Template Inheritance Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What will this Django template render?
Given the base template and child template below, what will be the rendered output when the child template is used?
Django
{% raw %}
<!-- base.html -->
<html>
<head><title>{% block title %}Base Title{% endblock %}</title></head>
<body>
<header>Header Content</header>
<main>{% block content %}Base Content{% endblock %}</main>
<footer>Footer Content</footer>
</body>
</html>
<!-- child.html -->
{% extends "base.html" %}
{% block title %}Child Title{% endblock %}
{% block content %}Child Content{% endblock %}
{% endraw %}Attempts:
2 left
💡 Hint
Remember that {% block %} tags in the child template replace the corresponding blocks in the base template.
✗ Incorrect
The child template overrides the 'title' and 'content' blocks from the base template. So the rendered output uses 'Child Title' in the title and 'Child Content' in the main section, while header and footer remain from the base.
📝 Syntax
intermediate2:00remaining
Identify the syntax error in this Django template inheritance code
Which option contains a syntax error that will cause Django template rendering to fail?
Django
{% raw %}
<!-- base.html -->
<html>
<head><title>{% block title %}Base Title{% endblock %}</title></head>
<body>
{% block content %}Base Content{% endblock %}
</body>
</html>
<!-- child.html -->
{% extends "base.html" %}
{% block title %}Child Title{% endblock %}
{% block content %}Child Content
{% endblock %}
{% endraw %}Attempts:
2 left
💡 Hint
Check if all block tags are properly closed.
✗ Incorrect
Option B is missing the closing {% endblock %} tag for the 'content' block, causing a syntax error during template rendering.
❓ state_output
advanced2:00remaining
What is the output of this nested block override?
Consider these templates. What will be the output inside the tag when rendering 'grandchild.html'?
Django
{% raw %}
<!-- base.html -->
<html>
<body>
<main>{% block main_content %}Base Main{% endblock %}</main>
</body>
</html>
<!-- child.html -->
{% extends "base.html" %}
{% block main_content %}Child Main{% endblock %}
<!-- grandchild.html -->
{% extends "child.html" %}
{% block main_content %}Grandchild Main{% endblock %}
{% endraw %}Attempts:
2 left
💡 Hint
The most specific child template's block content replaces the parent's block content.
✗ Incorrect
The 'grandchild.html' overrides the 'main_content' block from 'child.html', which itself overrides 'base.html'. The final output uses 'Grandchild Main'.
🔧 Debug
advanced2:00remaining
Why does this template raise a TemplateSyntaxError?
This child template extends 'base.html' but raises a TemplateSyntaxError. What is the cause?
Django
{% raw %}
{% extends "base.html" %}
{% block title %}Child Title
{% block content %}Child Content{% endblock %}
{% endblock %}
{% endraw %}Attempts:
2 left
💡 Hint
Check the order and closure of block tags.
✗ Incorrect
Option D is correct because the 'title' block is opened but not closed before the 'content' block starts, causing a syntax error.
🧠 Conceptual
expert3:00remaining
How does Django resolve blocks in multiple inheritance?
Given three templates: base.html, intermediate.html (extends base), and final.html (extends intermediate). If all define a block named 'sidebar', which block content will Django render when rendering final.html?
Attempts:
2 left
💡 Hint
Think about which template is the most specific child in the inheritance chain.
✗ Incorrect
Django uses the most specific block override in the inheritance chain. The final.html block named 'sidebar' replaces all parent blocks with the same name.