Blade template syntax in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a variable in Blade template.

Laravel

<p>[1]</p>

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

A$name

B{{ $name }}

C@name

Decho $name

Attempts:

3 left

💡 Hint

Common Mistakes

Including the curly braces inside the blank.

Using PHP echo syntax inside Blade.

In Blade, variables are displayed using double curly braces with the variable name inside, like {{ $name }}. Here, the blank is inside the double braces, so just the variable name with $ is needed.

2fill in blank

medium

Complete the code to write an if statement in Blade.

Laravel

@if([1])
  <p>Welcome back!</p>
@endif

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

Auser

B$user

C$user == true

Duser == true

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before variable.

Writing just the variable name without comparison.

Blade if statements use PHP expressions. To check if $user is true, write $user == true inside the parentheses.

3fill in blank

hard

Fix the error in the Blade loop syntax.

Laravel

@foreach($items as [1])
  <li>{{ $item }}</li>
@endforeach

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

A$item

Bitem

Citems

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Adding $ before the loop variable in the foreach statement.

Using the collection name instead of the item variable.

In Blade foreach loops, the variable after 'as' should not have a $ sign. So use 'item' not '$item'.

4fill in blank

hard

Fill both blanks to create a Blade component with a slot and a variable.

Laravel

<x-alert type=[1]>
  [2]
</x-alert>

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

A"error"

B{{ $message }}

C$message

D"success"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the string attribute value.

Using $message without curly braces.

The component attribute 'type' needs a string in quotes, so "error" is correct. To display the slot variable, use Blade's double curly braces with $message inside.

5fill in blank

hard

Fill all three blanks to write a Blade directive for a loop with a condition.

Laravel

@foreach($users as [1])
  @if([2]->active)
    <p>[3]->name</p>
  @endif
@endforeach

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

Auser

B$user

D$users

Attempts:

3 left

💡 Hint

Common Mistakes

Using $ in the foreach variable.

Omitting $ inside Blade expressions.

Mixing variable names inconsistently.

In the foreach, the variable after 'as' is 'user' without $. In the if condition, use 'user->active' (no $). Inside the paragraph, use $user->name with $ sign and curly braces.

Practice

1. Which Blade syntax is used to safely display a variable's value in a view?

easy

A. Using PHP echo tags like

B. Using single curly braces like { $variable }

C. Using double curly braces like {{ $variable }}

D. Using square brackets like [ $variable ]

Solution

1. Step 1: Identify Blade syntax for output

   Blade uses double curly braces {{ }} to display variables safely by escaping HTML.

2. Step 2: Compare options

   Only Using double curly braces like {{ $variable }} uses {{ $variable }}, which is the correct Blade syntax.

3. Final Answer:

   Using double curly braces like {{ $variable }} -> Option C

4. Quick Check:

   Safe variable display = {{ $variable }} [OK]

Hint: Remember: {{ }} is for safe variable output in Blade [OK]

Common Mistakes:

• Using single braces which is invalid in Blade
• Using raw PHP echo instead of Blade syntax
• Confusing square brackets with Blade syntax

2. Which of the following is the correct Blade directive to start a conditional statement?

easy

A. @if(condition)

B. #if(condition)

C. if(condition):

D. @@if(condition)

Solution

1. Step 1: Recall Blade directive syntax

   Blade uses directives starting with @ for control structures like conditionals.

2. Step 2: Identify correct conditional start

   The correct syntax to start an if statement is @if(condition).

3. Final Answer:

   @if(condition) -> Option A

4. Quick Check:

   Blade if start = @if(condition) [OK]

Hint: Blade directives always start with @ symbol [OK]

Common Mistakes:

• Using # instead of @ for directives
• Using raw PHP if syntax inside Blade
• Double @ signs which are for escaping

3. What will be the output of this Blade snippet if $name = 'Alice'?

<p>Hello, {{ $name }}!</p>
<p>@if($name == 'Alice')
  Welcome back! 
@endif</p>

medium

A. Syntax error due to missing @endif

B. Hello, Alice!

C. Hello, {{ $name }}!
Welcome back!

D. Hello, Alice!
Welcome back!

Solution

1. Step 1: Evaluate variable output

   The {{ $name }} outputs 'Alice' safely inside the first paragraph.

2. Step 2: Evaluate conditional block

   The condition $name == 'Alice' is true, so 'Welcome back!' is shown inside the second paragraph.

3. Final Answer:

   <p>Hello, Alice!</p> <p>Welcome back!</p> -> Option D

4. Quick Check:

   Variable and if true = output text [OK]

Hint: If condition true, content inside @if shows [OK]

Common Mistakes:

• Thinking Blade outputs raw variable syntax
• Missing @endif causing syntax errors
• Ignoring condition result and outputting nothing

4. Identify the error in this Blade template snippet:

@foreach($items as $item)
  <p>{{ $item }}</p>
@endforeachd

medium

A. The variable $item should be escaped with triple braces

B. The closing directive should be @endforeach, not @endforeachd

C. The loop variable should be $items, not $item

D. Missing semicolon after {{ $item }}

Solution

1. Step 1: Check foreach directive syntax

   The correct closing directive for a foreach loop is @endforeach.

2. Step 2: Identify typo in closing directive

   The snippet uses @endforeachd which is invalid and causes a syntax error.

3. Final Answer:

   The closing directive should be @endforeach, not @endforeachd -> Option B

4. Quick Check:

   Correct directive spelling = @endforeach [OK]

Hint: Check directive spelling carefully, no extra letters [OK]

Common Mistakes:

• Adding extra letters to Blade directives
• Thinking variables need semicolons in Blade
• Confusing loop variable names

5. You want to display a list of users with their emails, but only if the email is verified. Which Blade snippet correctly does this? A)

@foreach($users as $user)
  @if($user->email_verified)
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

B)

@foreach($users as $user)
  @if($user[email_verified])
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

C)

@foreach($users as $user)
  @if($user->email_verified == true
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

D)

@foreach($users as $user)
  @if($user->email_verified = true)
    <p>{{ $user->name }} - {{ $user->email }}</p>
  @endif
@endforeach

hard

A. Option A

B. Option B

C. Option C

D. Option D

Solution

1. Step 1: Identify correct conditional syntax for object property

   Blade @if treats object boolean properties like $user->email_verified as truthy if verified.

2. Step 2: Evaluate each snippet's logic and syntax

   Snippet A with @if($user->email_verified) correctly shows only verified users.
   Snippet B uses array syntax $user[email_verified] invalid on objects.
   Snippet C with @if($user->email_verified == true has syntax error (missing closing )).
   Snippet D uses = true (assignment), always true, shows all users.

3. Final Answer:

   Option A -> Option A

4. Quick Check:

   Object property truthy check [OK]

Hint: Use == for comparison, not = which assigns [OK]

Common Mistakes:

• Using = instead of == in conditions
• Using array syntax on objects
• Forgetting closing parenthesis in @if conditions