Including sub-views (@include) in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include a sub-view named 'header' in a Blade template.

Laravel

@[1]('header')

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

Ainclude

Bextends

Csection

Dyield

Attempts:

3 left

💡 Hint

Common Mistakes

Using @extends instead of @include

Using @section or @yield which are for layouts and sections

The @include directive is used to insert a sub-view inside a Blade template.

2fill in blank

medium

Complete the code to include a sub-view named 'footer' passing a variable 'year' to it.

Laravel

@include('footer', ['[1]' => $year])

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

Adate

Btime

Cyear

Dfooter

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different key name than the variable expected in the sub-view

Passing the variable without an array

The variable name 'year' is passed as a key in the array to the included view.

3fill in blank

hard

Fix the error in the code to correctly include a sub-view named 'nav' with a variable 'items'.

Laravel

@include('nav', [1])

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

Aitems => $items

Bitems

C$items

D['items' => $items]

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the variable directly without array brackets

Using invalid syntax without quotes or brackets

The second argument to @include must be an array mapping variable names to values.

4fill in blank

hard

Fill both blanks to include a sub-view named 'sidebar' and pass variables 'user' and 'role' to it.

Laravel

@include('[1]', ['[2]' => $user, 'role' => $role])

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

Asidebar

Bprofile

Cuser

Daccount

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong sub-view name

Using wrong variable key name

The first blank is the sub-view name 'sidebar'. The second blank is the variable name 'user' passed to the sub-view.

5fill in blank

hard

Fill all three blanks to include a sub-view named 'card', passing variables 'title', 'content', and 'footer'.

Laravel

@include('[1]', ['[2]' => $title, '[3]' => $content, 'footer' => $footer])

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

Acard

Btitle

Ccontent

Dpanel

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong sub-view name

Mismatching variable keys and variable names

The sub-view name is 'card'. The variable keys are 'title' and 'content' matching the variables passed.

Practice

1. What does the @include directive do in a Laravel Blade template?

easy

A. It creates a new database migration file.

B. It defines a new route in the web.php file.

C. It inserts a sub-view inside the current view to reuse code.

D. It compiles all CSS files into one.

Solution

1. Step 1: Understand the purpose of @include

   The @include directive is used in Blade templates to insert one view inside another, allowing code reuse.

2. Step 2: Identify what @include does not do

   It does not define routes, create migrations, or compile CSS files, which are unrelated tasks.

3. Final Answer:

   It inserts a sub-view inside the current view to reuse code. -> Option C

4. Quick Check:

   @include = Insert sub-view [OK]

Hint: Remember: @include inserts reusable view parts [OK]

Common Mistakes:

• Confusing @include with routing or migrations
• Thinking @include compiles assets
• Assuming @include creates new files

2. Which of the following is the correct syntax to include a Blade sub-view named header?

easy

A. @include('header')

B. @include:header

C. @include[header]

D. @include{header}

Solution

1. Step 1: Recall Blade include syntax

   The correct syntax uses parentheses and quotes: @include('viewname').

2. Step 2: Check each option format

   Only @include('header') uses the correct parentheses and quotes. Others use invalid symbols.

3. Final Answer:

   @include('header') -> Option A

4. Quick Check:

   Correct syntax uses parentheses and quotes [OK]

Hint: Use parentheses and quotes with @include [OK]

Common Mistakes:

• Using colons, brackets, or braces instead of parentheses
• Omitting quotes around view name
• Writing @include without parentheses

3. Given the following Blade code:

@include('nav')

and the nav.blade.php contains:

<nav>Menu</nav>

What will be the rendered output inside the main view?

medium

A. <nav>Menu</nav>

B. Menu

C. @include('nav')

D. Error: View not found

Solution

1. Step 1: Understand @include output

   The @include('nav') inserts the entire content of nav.blade.php into the main view.

2. Step 2: Check the content of nav.blade.php

   It contains the HTML <nav>Menu</nav>, so this exact HTML will appear in the output.

3. Final Answer:

   <nav>Menu</nav> -> Option A

4. Quick Check:

   @include inserts full sub-view content [OK]

Hint: Included view content appears exactly where @include is placed [OK]

Common Mistakes:

• Expecting only inner text without tags
• Thinking @include outputs the directive text
• Assuming an error if view exists

4. What is the error in this Blade code snippet?

@include('footer')

Assuming the file footer.blade.php does not exist in the views folder.

medium

A. Warning: Duplicate view inclusion.

B. No error, it renders nothing.

C. Syntax error due to missing semicolon.

D. Runtime error: View [footer] not found.

Solution

1. Step 1: Check if included view file exists

   The @include('footer') tries to load footer.blade.php. If it does not exist, Laravel throws an error.

2. Step 2: Identify the error type

   Laravel reports a runtime error stating the view is not found, not a syntax or warning error.

3. Final Answer:

   Runtime error: View [footer] not found. -> Option D

4. Quick Check:

   Missing view file causes runtime error [OK]

Hint: Ensure included view files exist to avoid runtime errors [OK]

Common Mistakes:

• Assuming no error if file missing
• Confusing syntax errors with missing files
• Expecting warnings instead of errors

5. How can you pass a variable named title with value 'Welcome' to a sub-view header using @include?

hard

A. @include('header')->with('title', 'Welcome')

B. @include('header', ['title' => 'Welcome'])

C. @include('header', title = 'Welcome')

D. @include('header', {title: 'Welcome'})

Solution

1. Step 1: Recall passing data syntax in @include

   To pass data, use an associative array as the second argument: @include('view', ['key' => value]).

2. Step 2: Check each option for correct syntax

   @include('header', ['title' => 'Welcome']) uses the correct array syntax. Options A, C, and D use invalid or unsupported syntax.

3. Final Answer:

   @include('header', ['title' => 'Welcome']) -> Option B

4. Quick Check:

   Pass data as array in second argument [OK]

Hint: Pass variables as array in second argument of @include [OK]

Common Mistakes:

• Using method chaining with @include
• Passing variables without array brackets
• Using object or JS-like syntax