Template includes for reusability in Django - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by this Django template?

Given the following templates, what will be the final rendered HTML output when rendering base.html?

Django

{% raw %}
<!-- base.html -->
<html>
  <body>
    {% include 'header.html' %}
    <main>
      <h1>Welcome</h1>
    </main>
    {% include 'footer.html' %}
  </body>
</html>

<!-- header.html -->
<header>
  <nav>Menu</nav>
</header>

<!-- footer.html -->
<footer>
  <p>Contact us</p>
</footer>
{% endraw %}

A

<html>  <body>    <header>
  <nav>Menu</nav>
</header>    <main>      <h1>Welcome</h1>    </main>    <footer>
  <p>Contact us</p>
</footer>  </body></html>

B <html> <body> <main> <h1>Welcome</h1> </main> </body></html>

C <html> <body> <header>Menu</header> <main> <h1>Welcome</h1> </main> <footer>Contact us</footer> </body></html>

D <html> <body> <nav>Menu</nav> <main> <h1>Welcome</h1> </main> <p>Contact us</p> </body></html>

💡 Hint

Remember that {% include %} inserts the exact content of the included template at that position.

The {% include %} tag inserts the full content of the specified template. So header.html and footer.html content appear exactly where included.

📝 Syntax

intermediate

Which option correctly includes a template with a variable context?

You want to include sidebar.html and pass a variable user_name with value "Alice". Which is the correct syntax?

A {% include 'sidebar.html' user_name='Alice' %}

B {% include 'sidebar.html' with user_name='Alice' %}

C {% include 'sidebar.html' context={'user_name': 'Alice'} %}

D {% include 'sidebar.html' passing user_name='Alice' %}

💡 Hint

Check the Django documentation for the correct keyword to pass variables in include.

The correct syntax to pass variables to an included template is {% include 'template' with var=value %}.

🔧 Debug

advanced

Why does this include not render the variable?

Given profile.html contains Hello, {{ user_name }}! and you include it as:
{% include 'profile.html' %}
But the output shows Hello, !. Why?

A The variable user_name was not passed to the included template, so it is empty.

B The include tag does not support variables inside included templates.

C You must use {% extends %} instead of {% include %} to pass variables.

D The variable user_name must be defined inside profile.html, not passed from outside.

💡 Hint

Think about how variables are shared between templates when using include.

Variables must be passed explicitly or be in the current context. If user_name is missing, it won't show in the included template.

🧠 Conceptual

advanced

What is the main benefit of using template includes in Django?

Why do developers use {% include %} tags in Django templates?

A To load external CSS and JavaScript files automatically.

B To execute Python code inside templates for dynamic logic.

C To replace the need for views by handling all logic in templates.

D To reuse common HTML parts across multiple pages, reducing duplication and easing maintenance.

💡 Hint

Think about how you avoid repeating the same code in many places.

Includes help reuse common parts like headers, footers, or menus, so you write them once and include everywhere.

❓ state_output

expert

What is the output of this nested include with variable override?

Consider these templates:

{% raw %} {% include 'section.html' with title='Main Title' %}

{{ title }}

{% include 'subsection.html' with title='Sub Title' %}

{{ title }}

{% endraw %}

What will be the rendered HTML when rendering main.html?

A

<h2>Main Title</h2>
<p>Main Title</p>

B

<h2>Sub Title</h2>
<p>Sub Title</p>

C

<h2>Main Title</h2>
<p>Sub Title</p>

D

<h2></h2>
<p>Sub Title</p>

💡 Hint

Variables passed with 'with' override only for that include and its children.

The first include sets title='Main Title' for section.html. Then section.html includes subsection.html passing title='Sub Title'. So section.html shows Main Title, subsection.html shows Sub Title.

Practice

1. What is the main purpose of using {% include %} in Django templates?

easy

A. To reuse parts of templates like headers or footers in multiple pages

B. To execute Python code inside the template

C. To define variables for use in the template

D. To create loops inside the template

Solution

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

   This tag is used to insert reusable template parts, such as headers or footers, into other templates.

2. Step 2: Compare with other template features

   Executing Python code or defining variables is done differently, not with {% include %}.

3. Final Answer:

   To reuse parts of templates like headers or footers in multiple pages -> Option A

4. Quick Check:

   Template reuse = To reuse parts of templates like headers or footers in multiple pages [OK]

Hint: Remember: include = reuse template parts like header/footer [OK]

Common Mistakes:

• Thinking include runs Python code
• Confusing include with variable assignment
• Using include to create loops

2. Which of the following is the correct syntax to include a template named menu.html inside another template?

easy

A. {% include menu.html %}

B. {% include 'menu.html' %}

C. {% include "menu.html %}

D. {% include 'menu' %}

Solution

1. Step 1: Check the syntax for including templates

   The correct syntax requires the template name as a quoted string inside the include tag, like {% include 'menu.html' %}.

2. Step 2: Evaluate the options

   {% include menu.html %} misses quotes, {% include "menu.html %} malformed double quotes (missing closing quote), {% include 'menu' %} misses the file extension.

3. Final Answer:

   {% include 'menu.html' %} -> Option B

4. Quick Check:

   Include syntax = {% include 'menu.html' %} [OK]

Hint: Include template name in single quotes inside {% include %} [OK]

Common Mistakes:

• Forgetting quotes around template name
• Omitting file extension
• Using variable name without quotes

3. Given the following templates:

{% raw %}{# base.html #}%

  
    {% include 'header.html' %}
    
Welcome
  
{% endraw %}

And header.html contains:

{% raw %}
Menu
{% endraw %}

What will be the rendered output of base.html?

medium

A. Error: header.html not found

B.

{% include 'header.html' %}
Welcome

C.

Menu
Welcome

D.

Menu
Welcome

Solution

1. Step 1: Understand how {% include %} works

   The include tag inserts the full content of header.html into base.html at the include position.

2. Step 2: Replace include with header content

   Replacing {% include 'header.html' %} with <header><nav>Menu</nav></header> gives the full HTML output.

3. Final Answer:

   <html> <body> <header><nav>Menu</nav></header> <h1>Welcome</h1> </body> </html> -> Option D

4. Quick Check:

   Include inserts full template content =
   Menu

   Welcome

   [OK]

Hint: Include inserts full content exactly where placed [OK]

Common Mistakes:

• Expecting include tag to remain in output
• Assuming partial content inserted
• Thinking include causes error if file exists

4. You wrote {% include header.html %} in your template but get a TemplateSyntaxError. What is the most likely cause?

medium

A. Missing quotes around the template name in the include tag

B. The header.html file does not exist

C. You need to use {% extends %} instead of {% include %}

D. You forgot to load the include tag library

Solution

1. Step 1: Identify syntax rules for include

   The template name must be a quoted string inside the include tag, like {% include 'header.html' %}.

2. Step 2: Analyze the error cause

   Omitting quotes causes TemplateSyntaxError because Django expects a string literal.

3. Final Answer:

   Missing quotes around the template name in the include tag -> Option A

4. Quick Check:

   Quotes required for template name = Missing quotes around the template name in the include tag [OK]

Hint: Always put template names in quotes inside {% include %} [OK]

Common Mistakes:

• Forgetting quotes around template name
• Confusing include with extends
• Assuming include tag needs loading

5. You want to create a reusable navigation menu that highlights the current page. You have menu.html included in multiple templates. How can you pass the current page name to menu.html using {% include %}?

hard

A. {% include 'menu.html' current_page='home' %}

B. {% include 'menu.html' only current_page='home' %}

C. {% include 'menu.html' with current_page='home' %}

D. {% include 'menu.html' as current_page='home' %}

Solution

1. Step 1: Recall how to pass variables with include

   Django allows passing variables to included templates using with keyword inside the include tag.

2. Step 2: Check syntax correctness

   The correct syntax is {% include 'menu.html' with current_page='home' %}. Other options are invalid syntax.

3. Final Answer:

   {% include 'menu.html' with current_page='home' %} -> Option C

4. Quick Check:

   Pass variables with 'with' keyword = {% include 'menu.html' with current_page='home' %} [OK]

Hint: Use 'with' keyword to pass variables in {% include %} [OK]

Common Mistakes:

• Omitting 'with' keyword when passing variables
• Using 'only' incorrectly with variables
• Trying to assign variables with 'as'