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.