Layouts and content_for in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Rails layout and view using content_for?

Given the following layout and view, what will the final HTML output be?

Layout (application.html.erb):

<html>
  <head>
    <title>MyApp</title>
    <%= yield :head %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

View (index.html.erb):

<% content_for :head do %>
  <style>body { background: #eee; }</style>
<% end %>

<h1>Welcome</h1>
<p>Hello, world!</p>

A

<html>
  <head>
    <title>MyApp</title>
    <style>body { background: #eee; }</style>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Hello, world!</p>
  </body>
</html>

B

<html>
  <head>
    <title>MyApp</title>
    <style>body { background: #eee; }</style>
  </head>
  <body>
    
  </body>
</html>

C

<html>
  <head>
    <title>MyApp</title>
    
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Hello, world!</p>
  </body>
</html>

D

<html>
  <head>
    <title>MyApp</title>
  </head>
  <body>
    <style>body { background: #eee; }</style>
    <h1>Welcome</h1>
    <p>Hello, world!</p>
  </body>
</html>

💡 Hint

Remember that content_for stores content for a named block that can be rendered in the layout with yield :name.

The content_for :head block in the view adds the style tag to the :head content. The layout calls yield :head inside the <head> tag, so the style is inserted there. The main yield outputs the rest of the view content inside the <body>.

📝 Syntax

intermediate

Which option correctly uses content_for to add a JavaScript snippet in a Rails layout?

You want to add a JavaScript snippet inside the <head> tag of your layout using content_for. Which code in your view will work correctly?

A

<%= content_for :head do %>
  <script>alert('Hi');</script>
<% end %>

B

<% content_for :javascript do %>
  <script>alert('Hi');</script>
<% end %>

C

<% content_for :head do %>
  <script>alert('Hi');</script>
<% end %>

D

<% content_for :head %>
  <script>alert('Hi');</script>
<% end %>

💡 Hint

Remember that content_for is a block helper and should be used with <% %> tags, not <%= %>.

Option C correctly uses content_for :head do with ERB tags <% %> to define a block. Option C uses a different name (:javascript) which won't render unless the layout yields :javascript. Option C uses <%= %> which tries to output the return value, causing an error. Option C is missing the do keyword, so it's invalid syntax.

❓ state_output

advanced

What is the value of content_for?(:sidebar) after rendering this view?

Given this layout and view, what will content_for?(:sidebar) return in the layout?

Layout snippet:

<body>
  <%= yield %>
  <% if content_for?(:sidebar) %>
    <aside><%= yield :sidebar %></aside>
  <% end %>
</body>

View snippet:

<h1>Page Title</h1>

<%# No content_for :sidebar block here %>

A Raises an error

B true

C nil

D false

💡 Hint

If no content was stored for a named block, content_for? returns false.

Since the view does not define any content_for :sidebar block, content_for?(:sidebar) returns false. This prevents rendering the sidebar section in the layout.

🔧 Debug

advanced

Why does this content_for block not appear in the layout?

Consider this layout and view. The style block inside content_for :head does not appear in the final HTML. Why?

Layout (application.html.erb):

<html>
  <head>
    <title>Site</title>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

View (show.html.erb):

<% content_for :head do %>
  <style>body { color: red; }</style>
<% end %>

<h1>Hello</h1>

A The layout does not call <code>yield :head</code> inside the <code>&lt;head&gt;</code> tag.

B The <code>content_for</code> block syntax is incorrect and causes a silent failure.

C The view must call <code>yield :head</code> to render the content.

D The <code>content_for</code> block must be placed inside the layout, not the view.

💡 Hint

Check if the layout includes yield :head where the content is expected.

The content_for block stores content for a named block, but the layout must explicitly call yield :head to render it. Since the layout lacks yield :head in the <head>, the style is never output.

🧠 Conceptual

expert

How does Rails handle multiple content_for calls with the same name in a single view?

In a Rails view, if you call content_for :scripts multiple times with different blocks, what will yield :scripts output in the layout?

A Only the first <code>content_for :scripts</code> block content is output, later ones are ignored.

B All <code>content_for :scripts</code> blocks are concatenated in the order they appear and output together.

C Rails raises an error because multiple <code>content_for</code> blocks with the same name are not allowed.

D Only the last <code>content_for :scripts</code> block content is output, previous ones are overwritten.

💡 Hint

Think about how Rails accumulates content for named blocks.

Rails appends content from multiple content_for calls with the same name. When yield :scripts is called, it outputs all concatenated content in the order they were defined.

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