Blade template syntax in Laravel - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Blade template output?

Given the following Blade template code, what will be rendered in the browser?

Laravel

@php
  $name = 'Alice';
@endphp

<h1>Hello, {{ $name }}!</h1>
@if(strlen($name) > 3)
  <p>Name is longer than 3 characters.</p>
@endif

A <h1>Hello, !</h1><p>Name is longer than 3 characters.</p>

B <h1>Hello, Alice!</h1>

C <h1>Hello, Alice!</h1><p>Name is longer than 3 characters.</p>

D Syntax error due to missing @endif

💡 Hint

Look at how Blade outputs variables and how the @if directive works.

The variable $name is set to 'Alice'. The {{ $name }} outputs 'Alice'. The @if condition checks if length is greater than 3, which is true, so the paragraph is shown.

📝 Syntax

intermediate

Which option correctly escapes output in Blade?

In Blade templates, which syntax safely escapes HTML to prevent XSS attacks?

A {{ $userInput }}

B {!! $userInput !!}

C @{{ $userInput }}

D @php echo $userInput; @endphp

💡 Hint

Think about which syntax escapes HTML and which outputs raw HTML.

The {{ }} syntax escapes HTML by default. The {!! !!} syntax outputs raw HTML without escaping. @{{ }} is used to show literal {{ }} in output. @php echo outputs raw without escaping.

🔧 Debug

advanced

What error does this Blade code cause?

Consider this Blade snippet. What error will it produce when rendered?

Laravel

@foreach($items as $item)
  <li>{{ $item }}</li>
@endforeach
@endfor

A Syntax error: Missing closing brace in {{ $item }}

B Syntax error: Unexpected @endfor without matching @for

C Runtime error: Undefined variable $items

D No error, renders list items

💡 Hint

Check if all Blade directives are properly closed.

The code uses @foreach but closes with @endfor, which is a mismatch causing a syntax error.

❓ state_output

advanced

What is the output of this Blade component with slots?

Given this Blade component usage, what will be rendered?

Laravel

<x-alert type="error">
  <strong>Error!</strong> Something went wrong.
</x-alert>

// Component blade:
// <div class="alert alert-{{ $type }}">
//   {{ $slot }}
// </div>

A

<div class="alert alert-error">
  <strong>Error!</strong> Something went wrong.
</div>

B

<div class="alert alert-">
  <strong>Error!</strong> Something went wrong.
</div>

C Runtime error: Undefined variable $slot

D

<div class="alert alert-error">
  <strong>Error!</strong> Something went wrong.
</div>

💡 Hint

Remember how Blade components pass content via slots and how attributes are accessed.

The component receives 'error' as $type and the inner HTML as $slot, rendering them inside the div with correct classes and content.

🧠 Conceptual

expert

Which Blade directive is used to include a child view and pass data?

You want to include a child Blade view named 'profile' and pass a variable $user to it. Which directive and syntax is correct?

A @include('profile', ['user' => $user])

B @component('profile', ['user' => $user]) @endcomponent

C @yield('profile', ['user' => $user])

D @extends('profile', ['user' => $user])

💡 Hint

Think about which directive is for including views with data.

@include is used to insert a child view and pass data as an array. @component is for components, @yield is for sections, and @extends is for layout inheritance.

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