Layouts and content_for in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a layout that yields the main content.

Ruby on Rails

<html>
  <body>
    [1]
  </body>
</html>

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

A<%= yield %>

B<%= content_for :header %>

C<%= render 'shared/footer' %>

D<%= link_to 'Home', root_path %>

Attempts:

3 left

💡 Hint

Common Mistakes

Using content_for instead of yield for main content.

Forgetting to include yield in the layout.

The <%= yield %> statement in a layout outputs the main content of the view using that layout.

2fill in blank

medium

Complete the code to define a named content block called :sidebar in a view.

Ruby on Rails

<% [1] :sidebar do %>
  <p>This is the sidebar content.</p>
<% end %>

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

Aprovide

Byield

Crender

Dcontent_for

Attempts:

3 left

💡 Hint

Common Mistakes

Using yield instead of content_for to define content blocks.

Using provide which is similar but not the correct helper here.

The content_for helper defines a named content block that can be used in layouts.

3fill in blank

hard

Fix the error in the layout to render the :sidebar content block if it exists.

Ruby on Rails

<div class="sidebar">
  [1]
</div>

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

A<%= yield :sidebar %>

B<%= content_for :sidebar %>

C<%= render :sidebar %>

D<%= provide :sidebar %>

Attempts:

3 left

💡 Hint

Common Mistakes

Using content_for in the layout to output content.

Using render or provide which do not output named content blocks.

To render a named content block in a layout, use yield with the block's name.

4fill in blank

hard

Fill both blanks to define a layout that includes a header and yields main content.

Ruby on Rails

<header>
  [1]
</header>
<main>
  [2]
</main>

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

A<%= content_for :header %>

B<%= yield %>

C<%= yield :header %>

D<%= content_for :main %>

Attempts:

3 left

💡 Hint

Common Mistakes

Using content_for in the layout instead of yield.

Mixing up named and default content blocks.

Use yield :header to output the header content block and yield for main content.

5fill in blank

hard

Fill all three blanks to define a view that sets header content and main content.

Ruby on Rails

<% [1] :header do %>
  <h1>Welcome</h1>
<% end %>

<p>[2]</p>

<%= [3] %>

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

Acontent_for

BThis is the main page content.

Cyield

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using provide instead of content_for to define header.

Not using yield to output main content.

Use content_for to define header, plain text for main content, and yield to output main content in layout.

Practice

1. What is the main purpose of using content_for in Rails layouts?

easy

A. To define the main layout file for the application

B. To insert specific content into named sections of a layout

C. To create a new controller action

D. To style the page with CSS

Solution

1. Step 1: Understand the role of layouts

   Layouts provide a shared structure like headers and footers for pages.

2. Step 2: Understand content_for usage

   content_for allows views to add content to specific named areas in the layout.

3. Final Answer:

   To insert specific content into named sections of a layout -> Option B

4. Quick Check:

   content_for inserts content into layout spots [OK]

Hint: Remember: content_for fills layout placeholders [OK]

Common Mistakes:

• Confusing content_for with layout definition
• Thinking it styles pages directly
• Mixing it up with controller actions

2. Which of the following is the correct syntax to define a content block named :sidebar in a Rails view?

easy

A. <%= yield :sidebar %>

B. <% content_for :sidebar = 'Sidebar content' %>

C. <% sidebar_content 'Sidebar content' %>

D. <%= content_for :sidebar do %>Sidebar content<% end %>

Solution

1. Step 1: Recall content_for block syntax

   The correct way is to use content_for :name do ... end with ERB tags.

2. Step 2: Check each option

   <%= content_for :sidebar do %>Sidebar content<% end %> uses <%= content_for :sidebar do %> ... <% end %> which is correct syntax. <% content_for :sidebar = 'Sidebar content' %> tries assignment incorrectly. <%= yield :sidebar %> is for yielding, not defining. <% sidebar_content 'Sidebar content' %> is invalid.

3. Final Answer:

   <%= content_for :sidebar do %>Sidebar content<% end %> -> Option D

4. Quick Check:

   Use content_for :name do ... end to define content [OK]

Hint: Use content_for :name do ... end to define blocks [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Confusing yield with content_for
• Missing ERB tags or using wrong ones

3. Given the layout code:

<html>
<body>
  <header><%= yield :header %></header>
  <main><%= yield %></main>
  <footer><%= yield :footer %></footer>
</body>
</html>

And the view code:

<%= content_for :header do %>Welcome Header<% end %>
Main content here
<%= content_for :footer do %>Footer Info<% end %>

What will be rendered inside the <main> tag?

medium

A. Footer Info

B. Welcome Header

C. Main content here

D. Nothing

Solution

1. Step 1: Understand yield usage in layout

   yield without arguments renders the main view content. yield :header and yield :footer render named content blocks.

2. Step 2: Identify main content in view

   The main content is the part outside content_for blocks: <p>Main content here</p>.

3. Final Answer:

   <p>Main content here</p> -> Option C

4. Quick Check:

   Main content = yield without args = <p>Main content here</p> [OK]

Hint: Main content is outside content_for, shown by plain yield [OK]

Common Mistakes:

• Thinking content_for blocks appear in main yield
• Confusing named yields with main yield
• Ignoring content outside content_for

4. You have this layout snippet:

<header><%= yield :title %></header>

And this view code:

<% content_for :title = 'Page Title' %>

Why does the title not appear in the header when rendering?

medium

A. Because content_for must use a block, not assignment

B. Because yield is missing in the layout

C. Because the layout file is not linked properly

D. Because content_for only works in controllers

Solution

1. Step 1: Check content_for syntax in view

   The code uses assignment content_for :title = 'Page Title', which is invalid syntax.

2. Step 2: Correct usage of content_for

   content_for requires a block: content_for :title do 'Page Title' end or content_for(:title) { 'Page Title' }.

3. Final Answer:

   Because content_for must use a block, not assignment -> Option A

4. Quick Check:

   content_for needs blocks, not assignment [OK]

Hint: Always use blocks with content_for, not assignment [OK]

Common Mistakes:

• Using assignment instead of block for content_for
• Forgetting to yield named content in layout
• Assuming content_for works in controllers

5. You want to create a layout that shows a custom page title if provided, or a default title otherwise. Which layout code correctly uses content_for and yield to achieve this?

hard

A. <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title>

B. <title><%= yield(:title) || 'Default Title' %></title>

C. <title><%= content_for(:title) || 'Default Title' %></title>

D. <title><%= yield :title if content_for?(:title) %></title>

Solution

1. Step 1: Understand content_for? and yield

   content_for?(:title) checks if content was provided. yield(:title) outputs it.

2. Step 2: Check each option for fallback logic

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> uses a ternary to show yield(:title) if present, else 'Default Title'. <title><%= yield(:title) || 'Default Title' %></title> uses yield(:title) || 'Default Title' but yield(:title) returns nil if no content, so fallback works but less explicit. <title><%= content_for(:title) || 'Default Title' %></title> uses content_for(:title) which returns nil and does not output content. <title><%= yield :title if content_for?(:title) %></title> only yields if content exists but shows nothing otherwise.

3. Final Answer:

   <title><%= content_for?(:title) ? yield(:title) : 'Default Title' %></title> -> Option A

4. Quick Check:

   Use content_for? to check, then yield or fallback [OK]

Hint: Use content_for?(:name) to check before yielding [OK]

Common Mistakes:

• Using content_for instead of content_for? for checking
• Assuming yield(:name) returns empty string instead of nil
• Not providing fallback content