Template inheritance (@extends, @section, @yield) in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base layout in a Blade template.

Laravel

@[1]('layouts.app')

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

A@include

B@extends

C@yield

D@section

Attempts:

3 left

💡 Hint

Common Mistakes

Using @section instead of @extends to inherit a layout.

Using @yield which is for placeholders, not inheritance.

Use @extends to specify which layout this template inherits from.

2fill in blank

medium

Complete the code to define a content section named 'title'.

Laravel

@[1]('title')
My Page Title
@endsection

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

A@section

B@yield

C@extends

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @yield to define content instead of to display it.

Forgetting to close the section with @endsection.

Use @section to start defining a named section that fills a placeholder.

3fill in blank

hard

Fix the error in the code to display the 'content' section in the layout.

Laravel

<div>
  @[1]('content')
</div>

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

A@section

B@extends

C@yield

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @section in the layout instead of @yield.

Using @extends in the layout which is for child templates.

Use @yield in the layout to display the content of a named section from child templates.

4fill in blank

hard

Fill both blanks to create a section named 'sidebar' and end it properly.

Laravel

@[1]('sidebar')
  <p>Sidebar content here</p>
@[2]

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

A@section

B@yield

C@endsection

D@extends

Attempts:

3 left

💡 Hint

Common Mistakes

Using @yield to start or end a section.

Forgetting to close the section with @endsection.

Start a section with @section and close it with @endsection to define content blocks.

5fill in blank

hard

Fill all three blanks to extend 'layouts.master', define a 'content' section, and end it.

Laravel

@[1]('layouts.master')

@[2]('content')
<p>Welcome to the site!</p>
@[3]

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

A@yield

B@section

C@endsection

D@extends

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up @yield and @section directives.

Not closing the section with @endsection.

Use @extends to inherit a layout, @section to start content, and @endsection to close it.

Practice

1. What is the main purpose of the @extends directive in Laravel Blade templates?

easy

A. To define a section of content inside a template

B. To display content from a section in the layout

C. To specify which base layout the current view should use

D. To include a partial view inside another view

Solution

1. Step 1: Understand the role of @extends

   The @extends directive tells Laravel which base layout file the current view should build upon.

2. Step 2: Differentiate from other directives

   @section defines content blocks, @yield displays them, and including partials uses @include. Only @extends sets the base layout.

3. Final Answer:

   To specify which base layout the current view should use -> Option C

4. Quick Check:

   @extends = base layout [OK]

Hint: Remember: @extends picks the base layout file [OK]

Common Mistakes:

• Confusing @extends with @section
• Thinking @extends outputs content
• Mixing @extends with @include

2. Which of the following is the correct syntax to define a content section named 'title' in a Blade template?

easy

A. @section('title') ... @endsection

B. @yield('title') ... @endyield

C. @extends('title') ... @endextends

D. @include('title') ... @endinclude

Solution

1. Step 1: Recall syntax for defining sections

   In Blade, @section('name') starts a content block, and @endsection ends it.

2. Step 2: Identify correct usage

   @yield is for displaying sections, @extends sets layout, and @include inserts partials. Only @section defines content.

3. Final Answer:

   @section('title') ... @endsection -> Option A

4. Quick Check:

   Define section = @section('name') [OK]

Hint: Use @section('name') to start content blocks [OK]

Common Mistakes:

• Using @yield to define content
• Trying to use @extends as a section
• Confusing @include with section definition

3. Given the following Blade layout file layouts/app.blade.php:

<html>
<head>
    <title>My Site - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

And a child view:

@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome!</h1>
@endsection

What will be the rendered HTML output?

medium

A. Syntax error due to incorrect section usage

B.

My Site - @section('title', 'Home Page')

@section('content')
Welcome!
@endsection

C.

My Site -

D.

My Site - Home Page

Welcome!

Solution

1. Step 1: Understand @yield and @section interaction

   The layout uses @yield('title') and @yield('content') to display content from child sections.

2. Step 2: Check child view sections

   The child view defines @section('title', 'Home Page') and a content section with an <h1> tag. These replace the yields in the layout.

3. Final Answer:

   The rendered HTML includes the title 'Home Page' and the <h1>Welcome!</h1> content -> Option D

4. Quick Check:

   @yield shows @section content [OK]

Hint: Remember: @yield outputs content from matching @section [OK]

Common Mistakes:

• Expecting raw @section tags in output
• Missing that @section('title', 'text') sets inline content
• Confusing @yield with @section definition

4. Consider this Blade child view code:

@extends('layouts.master')
@section('content')
<p>Hello World</p>

What is the problem with this code?

medium

A. Missing @endsection to close the content section

B. Incorrect use of @extends directive

C. Cannot use HTML inside @section

D. Should use @yield instead of @section

Solution

1. Step 1: Check section syntax completeness

   The @section('content') directive must be closed with @endsection to mark the end of the content block.

2. Step 2: Identify missing closing directive

   The code snippet lacks @endsection, causing a syntax error or unexpected behavior.

3. Final Answer:

   Missing @endsection to close the content section -> Option A

4. Quick Check:

   Always close @section with @endsection [OK]

Hint: Always pair @section with @endsection [OK]

Common Mistakes:

• Forgetting to close @section
• Thinking @yield defines content
• Believing HTML is not allowed inside sections

5. You have a base layout with multiple @yield placeholders: title, header, and content. You want to create a child view that fills only content and uses a default title and header from the layout. How should you write the child view?

hard

A. @extends('layouts.base')
@yield('title')
@yield('header')
@section('content')
Page content here
@endsection

B. @extends('layouts.base')
@section('content')
Page content here
@endsection

C. @extends('layouts.base')
@section('title', 'Default Title')
@section('header', 'Default Header')
@section('content')
Page content here
@endsection

D. @extends('layouts.base')
@include('title')
@include('header')
@section('content')
Page content here
@endsection

Solution

1. Step 1: Understand default content in layout

   If the base layout provides default content for title and header, you don't need to override those sections in the child view.

2. Step 2: Write child view with only needed sections

   Only define the content section in the child view to fill that placeholder, leaving others to default.

3. Final Answer:

   Child view extends layout and defines only content section -> Option B

4. Quick Check:

   Define only needed sections; others use layout defaults [OK]

Hint: Only override sections you want to change in child views [OK]

Common Mistakes:

• Overriding sections unnecessarily
• Using @yield inside child views
• Trying to include sections with @include