Macros for reusable components in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a macro named 'button' in a Jinja2 template.

Flask

{% macro [1](text) %}
  <button>{{ text }}</button>
{% endmacro %}

Drag options to blanks, or click blank then click option'

Abtn

Bmacro

Cbutton

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'macro' as the macro name instead of the actual component name.

Using a generic name like 'component' which is not descriptive.

The macro is named 'button' to define a reusable button component.

2fill in blank

medium

Complete the code to call the macro 'button' with the label 'Click me'.

Flask

{{ [1]('Click me') }}

Drag options to blanks, or click blank then click option'

Acall_button

Bmacro

Cbtn

Dbutton

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'call_button' which is not defined.

Using 'macro' which is a keyword, not the macro name.

To use the macro named 'button', call it by its name with the argument.

3fill in blank

hard

Fix the error in the macro call to pass the variable 'label' as the button text.

Flask

{{ button([1]) }}

Drag options to blanks, or click blank then click option'

Alabel

B'label'

Cbutton

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'label' as a string instead of a variable.

Passing unrelated names like 'text' or 'button'.

Pass the variable 'label' without quotes to use its value in the macro.

4fill in blank

hard

Fill both blanks to import the macro file and use the macro 'button' from it.

Flask

{% import '[1]' as [2] %}
{{ [2].button('Submit') }}

Drag options to blanks, or click blank then click option'

Amacros.html

Bcomponents.html

Cbtns.html

Dbuttons.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong file names that don't exist.

Using alias names that are not used in the macro call.

Import the macro file 'macros.html' and assign it an alias 'components' to use its macros.

5fill in blank

hard

Fill all three blanks to define a macro with a default argument and call it with a custom label.

Flask

{% macro [1](text='[2]') %}
  <button>{{ text }}</button>
{% endmacro %}

{{ [3]('Save') }}

Drag options to blanks, or click blank then click option'

Abutton

BClick me

CSubmit

Dbtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using different macro names in definition and call.

Not quoting the default argument string.

Define macro 'button' with default text 'Click me' and call it with 'Save' label.