0
0
Flaskframework~20 mins

Template inheritance with extends in Flask - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Template Inheritance Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the rendered output of this Flask template inheritance?
Given the base template base.html and child template child.html, what will be the final rendered HTML when rendering child.html?
Flask
{% raw %}
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Base Title{% endblock %}</title>
</head>
<body>
    <header>{% block header %}Base Header{% endblock %}</header>
    <main>{% block content %}Base Content{% endblock %}</main>
    <footer>{% block footer %}Base Footer{% endblock %}</footer>
</body>
</html>

<!-- child.html -->
{% extends "base.html" %}

{% block title %}Child Title{% endblock %}

{% block content %}
<p>Child Content</p>
{% endblock %}
{% endraw %}
A<!DOCTYPE html><html lang="en"><head><title>Base Title</title></head><body><header>Base Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>
B<!DOCTYPE html><html lang="en"><head><title>Base Title</title></head><body><header>Base Header</header><main>Base Content</main><footer>Base Footer</footer></body></html>
C<!DOCTYPE html><html lang="en"><head><title>Child Title</title></head><body><header>Child Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>
D<!DOCTYPE html><html lang="en"><head><title>Child Title</title></head><body><header>Base Header</header><main><p>Child Content</p></main><footer>Base Footer</footer></body></html>
Attempts:
2 left
💡 Hint
Remember that blocks in the child template override blocks with the same name in the base template.
📝 Syntax
intermediate
1:30remaining
Which option correctly uses the extends tag in a Flask template?
Select the correct syntax to extend a base template named layout.html in a Flask Jinja2 template.
A{% extends 'layout.html' %}
B{% extend 'layout.html' %}
C{% extends "layout.html" %}
D{% extends layout.html %}
Attempts:
2 left
💡 Hint
The extends tag requires quotes around the template name and the correct keyword.
🔧 Debug
advanced
2:00remaining
Why does this Flask template raise a TemplateNotFound error?
Given this child template code, why does Flask raise a TemplateNotFound error when rendering?
Flask
{% raw %}{% extends 'base.htm' %}

{% block content %}
<p>Hello</p>
{% endblock %}{% endraw %}
AThe base template filename is misspelled; it should be 'base.html' not 'base.htm'.
BThe extends tag must be at the end of the file, not the beginning.
CThe block tags are incorrectly nested inside the extends tag.
DFlask requires absolute paths in the extends tag.
Attempts:
2 left
💡 Hint
Check the filename spelling carefully.
❓ state_output
advanced
2:30remaining
What is the output of this nested template inheritance?
Consider three templates: base.html, middle.html extending base.html, and child.html extending middle.html. If base.html defines a block content with 'Base Content', middle.html overrides content with 'Middle Content', and child.html overrides content with 'Child Content', what will be rendered when rendering child.html?
Flask
{% raw %}
<!-- base.html -->
<html><body>{% block content %}Base Content{% endblock %}</body></html>

<!-- middle.html -->
{% extends 'base.html' %}
{% block content %}Middle Content{% endblock %}

<!-- child.html -->
{% extends 'middle.html' %}
{% block content %}Child Content{% endblock %}
{% endraw %}
A<html><body>Middle ContentChild Content</body></html>
B<html><body>Child Content</body></html>
C<html><body>Base Content</body></html>
D<html><body>Middle Content</body></html>
Attempts:
2 left
💡 Hint
The most specific child template's block overrides all parent blocks with the same name.
🧠 Conceptual
expert
2:00remaining
What happens if a block is missing in the child template when using extends?
If a child template extends a base template that defines a block named sidebar, but the child template does not override this block, what will be the output in the rendered page?
AFlask will raise a TemplateSyntaxError because the block is missing in the child.
BThe <code>sidebar</code> block will be empty in the rendered page.
CThe content of the <code>sidebar</code> block from the base template will be used.
DThe entire page will fail to render due to missing block override.
Attempts:
2 left
💡 Hint
Blocks in base templates provide default content if not overridden.