0
0
Laravelframework~20 mins

Template inheritance (@extends, @section, @yield) in Laravel - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Blade Template Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the rendered output of this Blade template inheritance?

Given the following base layout and child view, what will be the final rendered HTML?

Laravel
@extends('layouts.master')

@section('title', 'Home Page')

@section('content')
<p>Welcome to the home page!</p>
@endsection


// layouts/master.blade.php
<html>
<head>
    <title>@yield('title', 'Default Title')</title>
</head>
<body>
    <div class="content">
        @yield('content')
    </div>
</body>
</html>
A
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Default Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;Welcome to the home page!&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
B
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Default Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="content"&gt;
        
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
C
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Home Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="content"&gt;
        
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
D
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Home Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;Welcome to the home page!&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Attempts:
2 left
💡 Hint

Remember that @section content replaces @yield in the parent layout.

📝 Syntax
intermediate
2:00remaining
Which option correctly defines a section with default content fallback?

In Laravel Blade, you want to define a section called sidebar that can be overridden by child views but has default content if not overridden. Which option is correct?

A
@section('sidebar')
    &lt;p&gt;Default sidebar content&lt;/p&gt;
@show
B
@extends('sidebar')
@section('sidebar', '&lt;p&gt;Default sidebar content&lt;/p&gt;')
C@yield('sidebar', '<p>Default sidebar content</p>')
D
@section('sidebar')
    &lt;p&gt;Default sidebar content&lt;/p&gt;
@endsection
Attempts:
2 left
💡 Hint

Use @section with @show to define default content that can be replaced.

🔧 Debug
advanced
2:00remaining
Why does this Blade template not display the child content?

Consider this parent layout and child view. The child content inside @section('content') does not appear in the rendered page. What is the cause?

Laravel
// layouts/app.blade.php
<html>
<head><title>App</title></head>
<body>
    <div>@yield('content')</div>
</body>
</html>

// child.blade.php
@extends('layouts.app')

@section('content')
<p>Child content here</p>
@stop
AThe child view must use @yield instead of @section to display content.
BThe child view uses @stop instead of @endsection, causing the section to not render.
CThe parent layout is missing @section('content'), so the child section has no place to insert.
DThe parent layout should use @show instead of @yield to display sections.
Attempts:
2 left
💡 Hint

Check if the section closing directive matches the Blade syntax.

❓ state_output
advanced
2:00remaining
What is the output when a child view overrides only part of a section?

Given the parent layout and child view below, what will be the rendered output inside the content div?

Laravel
// layouts/base.blade.php
<html>
<body>
    <div>@yield('content')</div>
</body>
</html>

// child.blade.php
@extends('layouts.base')

@section('content')
<p>Start</p>
@parent
<p>End</p>
@endsection
A
&lt;div&gt;
&lt;p&gt;Start&lt;/p&gt;
@parent
&lt;p&gt;End&lt;/p&gt;
&lt;/div&gt;
B
&lt;div&gt;
&lt;p&gt;Start&lt;/p&gt;

&lt;p&gt;End&lt;/p&gt;
&lt;/div&gt;
C
&lt;div&gt;
&lt;p&gt;Start&lt;/p&gt;
&lt;p&gt;End&lt;/p&gt;
&lt;/div&gt;
D
&lt;div&gt;
&lt;p&gt;Start&lt;/p&gt;

&lt;/div&gt;
Attempts:
2 left
💡 Hint

Remember that @parent inserts the parent section content.

🧠 Conceptual
expert
2:00remaining
Which statement about Blade template inheritance is TRUE?

Choose the correct statement about how @extends, @section, and @yield work together in Laravel Blade templates.

A<code>@yield</code> in a parent template outputs the content defined by <code>@section</code> in child views.
B<code>@section</code> in a parent template immediately outputs content to the browser.
C<code>@yield</code> in a child view inserts content from the parent layout.
D<code>@extends</code> defines a section that can be filled by child views.
Attempts:
2 left
💡 Hint

Think about which directive is responsible for outputting section content.