Macros for reusable components in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Flask macro render?

Given the macro and its usage below, what HTML output will be rendered?

Flask

{% macro button(text, type='button') %}
  <button type="{{ type }}">{{ text }}</button>
{% endmacro %}

{{ button('Click me', 'submit') }}

A <button>Click me</button>

B <button type="submit">button</button>

C <button type="button">Click me</button>

D <button type="submit">Click me</button>

💡 Hint

Look at how the macro uses the parameters and what is passed when calling it.

The macro defines a button with a type attribute defaulting to 'button'. When called with 'submit', it replaces the type attribute. The text inside the button is 'Click me'.

📝 Syntax

intermediate

Identify the syntax error in this macro definition

Which option shows the syntax error in the macro below?

Flask

{% macro list_items(items) %}
  <ul>
  {% for item in items %}
    <li>{{ item }}</li>
  {% endfor %}
  </ul>
{% endmacro %}

A Incorrect macro end tag: should be {% endmacro %} but is {% endmacro %}

B No syntax error in the macro

C Missing closing tag for <ul>

D For loop missing colon after {% for item in items %}

💡 Hint

Check Jinja2 macro and loop syntax carefully.

The macro is correctly defined with proper Jinja2 syntax. The for loop and macro tags are correct.

❓ state_output

advanced

What is the output of this macro call with nested macros?

Consider these macros and the call below. What HTML is produced?

Flask

{% macro badge(text) %}
  <span class="badge">{{ text }}</span>
{% endmacro %}

{% macro user_info(name, status) %}
  <div class="user">
    <h2>{{ name }}</h2>
    {{ badge(status) }}
  </div>
{% endmacro %}

{{ user_info('Alice', 'Active') }}

A

<div class="user">
  <h2>Alice</h2>
  <span class="badge">Active</span>
</div>

B

<div class="user">
  <h2>Alice</h2>
  badge(Active)
</div>

C

<div class="user">
  <h2>Alice</h2>
  <span>Active</span>
</div>

D

<div class="user">
  <h2>Active</h2>
  <span class="badge">Alice</span>
</div>

💡 Hint

Look at how the user_info macro calls the badge macro inside it.

The user_info macro outputs a div with the name in h2 and calls badge macro to render the status inside a span with class 'badge'.

🔧 Debug

advanced

Why does this macro raise an error?

This macro is called with None but raises an error. What is the cause?

Flask

{% macro first_item(items) %}
  {{ items[0] }}
{% endmacro %}

{{ first_item(None) }}

A TypeError because None is not subscriptable

B SyntaxError due to missing colon in macro

C IndexError because list is empty

D No error, outputs None

💡 Hint

Think about what happens when you try to access index 0 of None.

Calling items[0] when items is None causes a TypeError because NoneType does not support indexing.

🧠 Conceptual

expert

Which statement about Flask macros is true?

Choose the correct statement about macros in Flask's Jinja2 templates.

A Macros can only be defined in Python files, not in templates.

B Macros automatically update the server-side Python variables when called.

C Macros can accept parameters and be reused with different arguments to generate HTML.

D Macros execute asynchronously to improve template rendering speed.

💡 Hint

Think about what macros do in templates.

Macros are reusable template snippets that accept parameters and generate HTML. They do not affect server-side variables directly, are defined in templates, and run synchronously.

Practice

1. What is the main purpose of using {% macro %} in Flask templates?

easy

A. To create reusable blocks of HTML code

B. To define Python functions inside templates

C. To import external CSS files

D. To handle form submissions

Solution

1. Step 1: Understand what macros do in Flask templates

   Macros are used to write reusable HTML blocks that can be called multiple times to avoid repetition.

2. Step 2: Compare options with macro purpose

   Only To create reusable blocks of HTML code correctly describes macros as reusable HTML blocks. Other options describe unrelated tasks.

3. Final Answer:

   To create reusable blocks of HTML code -> Option A

4. Quick Check:

   Macros = reusable HTML blocks [OK]

Hint: Macros create reusable HTML snippets in templates [OK]

Common Mistakes:

• Thinking macros define Python functions
• Confusing macros with CSS imports
• Assuming macros handle form data

2. Which of the following is the correct syntax to define a macro named button that takes a parameter label?

easy

A. {% define button(label) %} {{ label }} {% enddefine %}

B. {% macro button(label) %} {{ label }} {% endmacro %}

C. {{ macro button(label) }} {{ label }} {{ endmacro }}

D. <% macro button(label) %> {{ label }} <% endmacro %>

Solution

1. Step 1: Recall correct macro syntax in Flask Jinja templates

   Macros are defined with {% macro name(params) %} ... {% endmacro %} tags.

2. Step 2: Check each option's syntax

   {% macro button(label) %} {{ label }} {% endmacro %} uses correct {% %} tags and endmacro. Others use wrong delimiters or keywords.

3. Final Answer:

   {% macro button(label) %} <button>{{ label }}</button> {% endmacro %} -> Option B

4. Quick Check:

   Macro syntax = {% macro %} ... {% endmacro %} [OK]

Hint: Use {% macro %} and {% endmacro %} to define macros [OK]

Common Mistakes:

• Using {{ }} instead of {% %} for macro definition
• Using incorrect keywords like define or <% %>
• Forgetting the endmacro tag

3. Given the macro defined in macros.html as:

{% raw %}{% macro greet(name) %}Hello, {{ name }}!{% endmacro %}{% endraw %}

And imported in index.html with:

{% raw %}{% import 'macros.html' as m %}{% endraw %}

What will be the output of {{ m.greet('Alice') }} in index.html?

medium

A. Error: macro not found

B. {{ m.greet('Alice') }}

C. greet('Alice')

D. Hello, Alice!

Solution

1. Step 1: Understand macro import and usage

   The macro greet(name) returns 'Hello, {{ name }}!'. Importing as m allows calling m.greet('Alice').

2. Step 2: Evaluate the macro call output

   Calling m.greet('Alice') replaces {{ name }} with 'Alice', so output is 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option D

4. Quick Check:

   Macro call with parameter = rendered string [OK]

Hint: Imported macros called with alias render output [OK]

Common Mistakes:

• Expecting literal macro call text instead of rendered output
• Forgetting to import macros before use
• Confusing macro call syntax with variable output

4. What is wrong with this macro usage in a Flask template?

{% raw %}{% macro card(title) %}
{{ title }}
{% endmacro %}{% endraw %}
{{ card() }}

medium

A. The macro is not properly closed with {% endmacro %}

B. Macros cannot return HTML elements

C. The macro is called without the required parameter

D. The macro name is invalid

Solution

1. Step 1: Check macro definition and parameters

   The macro card requires one parameter: title.

2. Step 2: Check macro call

   The call {{ card() }} provides no argument, causing an error due to missing parameter.

3. Final Answer:

   The macro is called without the required parameter -> Option C

4. Quick Check:

   Missing macro argument = error [OK]

Hint: Always pass required parameters when calling macros [OK]

Common Mistakes:

• Calling macros without required arguments
• Thinking macros must return plain text only
• Missing endmacro tag (not the case here)

5. You want to create a reusable navigation bar macro that highlights the current page. Which approach correctly uses macros and parameters to achieve this?

hard

A. {% raw %}{% macro navbar(current) %}HomeAbout{% endmacro %}{% endraw %} Then call with {{ navbar('about') }}

B. {% raw %}{% macro navbar() %}HomeAbout{% endmacro %}{% endraw %} Then call with {{ navbar() }}

C. {% raw %}{% macro navbar(current) %}HomeAbout{% endmacro %}{% endraw %} Then call with {{ navbar('home') }}

D. {% raw %}{% macro navbar(current) %}HomeAbout{% endmacro %}{% endraw %} Then call with {{ navbar('home') }}

Solution

1. Step 1: Understand the need for dynamic class assignment

   The macro should accept a parameter to know which page is current and add 'active' class accordingly.

2. Step 2: Analyze each option's approach

   {% raw %}{% macro navbar(current) %}
   HomeAbout
   {% endmacro %}{% endraw %} Then call with {{ navbar('about') }} uses a parameter and conditional expression to add 'active' class only to the current page link. Others either hardcode classes or ignore the parameter.

3. Final Answer:

   Uses parameters and conditional logic to highlight current page -> Option A

4. Quick Check:

   Dynamic class with parameter = correct navbar macro [OK]

Hint: Use macro parameters with conditionals for dynamic HTML [OK]

Common Mistakes:

• Hardcoding active class without parameters
• Ignoring the current page parameter
• Assigning 'current' class to all links