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.