Blade directives in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a Blade if directive.

Laravel

@[1](user)

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

Aif

Bextends

Csection

Dforeach

Attempts:

3 left

💡 Hint

Common Mistakes

Using @foreach instead of @if

Using @section or @extends which are for layouts

The @if directive starts a conditional block in Blade templates.

2fill in blank

medium

Complete the code to end a Blade if directive.

Laravel

@[1]

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

Aendforeach

Bendif

Cstop

Dendsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using @endforeach which ends a loop

Using @stop or @endsection which end sections

The @endif directive closes an @if block in Blade templates.

3fill in blank

hard

Fix the error in the Blade loop directive to iterate over $items.

Laravel

@foreach($items as [1])
    [1]
@endforeach

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

Ai

Bitems

Citem[]

D$item

Attempts:

3 left

💡 Hint

Common Mistakes

Using plural variable names inside the loop

Omitting the $ sign in the variable

The variable inside the loop should be a singular form with the $ sign inside the parentheses. In Blade you keep the $ sign for variables.

4fill in blank

hard

Fill both blanks to display a variable safely and end the section.

Laravel

@section('content')
    [1]
@[2]

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

A$title

B$content

Cstop

Dendsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using raw PHP tags instead of Blade syntax

Confusing @stop and @endsection

Use {{ $title }} to display the variable safely. @stop ends the section and is an alternative to @endsection.

5fill in blank

hard

Fill all three blanks to create a Blade component with a slot and pass a variable.

Laravel

<x-alert type="[1]">
    [2]
        [3]
    @endslot
</x-alert>

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

Aerror

B{{ $message }}

C@slot('title')

Dsuccess

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect slot syntax

Forgetting to pass the variable inside curly braces

The component type is set to 'error'. Use @slot('title') to define a slot, and {{ $message }} to display the message inside the component.