ERB template syntax in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Output of ERB expression tags

What will be rendered on the page by this ERB snippet?

<% name = 'Alice' %>
<%= "Hello, #{name}!" %>
<%# This is a comment %>
<% name = 'Bob' %>
<%= "Goodbye, #{name}!" %>

Ruby on Rails

<% name = 'Alice' %>
<%= "Hello, #{name}!" %>
<%# This is a comment %>
<% name = 'Bob' %>
<%= "Goodbye, #{name}!" %>

A Hello, Alice!Goodbye, Bob!

B Hello, Alice!Goodbye, Alice!

C Hello, Bob!Goodbye, Bob!

D Hello, Bob!Goodbye, Alice!

💡 Hint

Remember that <% %> runs Ruby code without output, and <%= %> outputs the result.

The first <% name = 'Alice' %> sets name to 'Alice'. Then <%= "Hello, #{name}!" %> outputs 'Hello, Alice!'. The comment <%# ... %> is ignored. Then name is changed to 'Bob'. The last <%= ... %> outputs 'Goodbye, Bob!'.

📝 Syntax

intermediate

Correct ERB tag for Ruby code without output

Which ERB tag correctly runs Ruby code but does NOT output anything to the page?

A &lt;% ruby_code %&gt;

B &lt;%= ruby_code %&gt;

C &lt;%# ruby_code %&gt;

D &lt;%== ruby_code %&gt;

💡 Hint

Think about which tag runs code silently.

The <% %> tag runs Ruby code but does not output anything. The <%= %> tag outputs the result. The <%# %> is a comment and does not run code. The <%== %> is invalid syntax.

🔧 Debug

advanced

Identify the ERB syntax error

Which option contains an ERB syntax error that will cause the template to fail rendering?

Ruby on Rails

<%= 'Hello' %>
<% if true %>
  <%= 'Yes' %>
<% end %>

A

<% if user_signed_in? %>
<%= 'Welcome!' %>
<% end %>

B

<% if user_signed_in? %>
  <%= 'Welcome!' %>
<% end %>

C

<%= if user_signed_in? %>
  <%= 'Welcome!' %>
<% end %>

D

<% if user_signed_in? %>
  <%== 'Welcome!' %>
<% end %>

💡 Hint

Check which tag is used to start the if statement.

Option C uses <%= if user_signed_in? %> which tries to output the if statement itself, causing a syntax error. The correct way is to use <% if ... %> without = to run code without output.

❓ state_output

advanced

Value of variable after ERB execution

Given this ERB snippet, what is the value of count after rendering?

<% count = 0 %>
<% 3.times do %>
  <% count += 1 %>
<% end %>
<%= count %>

Ruby on Rails

<% count = 0 %>
<% 3.times do %>
  <% count += 1 %>
<% end %>
<%= count %>

A 0

B Error: undefined variable

C 1

D 3

💡 Hint

Remember that Ruby code inside <% %> runs and can change variables.

The variable count starts at 0. The loop runs 3 times, each time adding 1 to count. So count becomes 3. The <%= count %> outputs 3.

🧠 Conceptual

expert

Difference between <%= and <%== in ERB

What is the main difference between the ERB tags <%= %> and <%== %> when rendering HTML content?

A <%= outputs raw HTML without escaping; <%== escapes HTML entities before output

B <%= escapes HTML entities before output; <%== outputs raw HTML without escaping

C Both escape HTML entities before output

D Both output raw HTML without escaping

💡 Hint

Think about safe HTML rendering and escaping.

The <%= %> tag escapes HTML entities to prevent injection attacks, so it outputs safe text. The <%== %> tag outputs raw HTML without escaping, useful when you want to render HTML tags directly.

Practice

1. Which ERB tag should you use to display the result of a Ruby expression inside HTML?

easy

A. <% %>

B. <%# %>

C. <%= %>

D. <%== %>

Solution

1. Step 1: Understand ERB tags for output

   The <%= %> tag evaluates Ruby code and inserts the result into the HTML.

2. Step 2: Compare with other tags

   <% %> runs Ruby code without output, <%# %> is a comment, and <%== %> is not standard ERB syntax.

3. Final Answer:

   <%= %> -> Option C

4. Quick Check:

   Output Ruby result = <%= %> [OK]

Hint: Use <%= %> to show Ruby results in HTML [OK]

Common Mistakes:

• Using <% %> which does not output anything
• Confusing comment tag <%# %> with output
• Trying to use <%== %> which is invalid

2. Which of the following is the correct syntax to run Ruby code without showing output in an ERB template?

easy

A. <%== ruby_code %>

B. <%= ruby_code %>

C. <%# ruby_code %>

D. <% ruby_code %>

Solution

1. Step 1: Identify ERB tags for code execution

   The <% %> tag runs Ruby code but does not insert output into HTML.

2. Step 2: Differentiate from output tags

   <%= %> outputs result, <%# %> is a comment, and <%== %> is invalid syntax.

3. Final Answer:

   <% ruby_code %> -> Option D

4. Quick Check:

   Run code without output = <% %> [OK]

Hint: Use <% %> for Ruby logic without output [OK]

Common Mistakes:

• Using <%= %> which outputs result
• Using <%# %> which comments out code
• Trying invalid <%== %> syntax

3. Given this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><%= item.upcase %></li>
  <% end %>
</ul>

What will be the rendered HTML if items = ['apple', 'banana']?

medium

A. APPLEBANANA

B. item.upcaseitem.upcase

C. applebanana

D.

Solution

1. Step 1: Understand the loop and method call

   The code loops over each item in the array and outputs the uppercase version using item.upcase.

2. Step 2: Predict the HTML output

   Each item is wrapped in <li> tags with uppercase text, so the list shows APPLE and BANANA.

3. Final Answer:

   <ul><li>APPLE</li><li>BANANA</li></ul> -> Option A

4. Quick Check:

   Loop with upcase output = <ul><li>APPLE</li><li>BANANA</li></ul> [OK]

Hint: Remember <%= %> outputs evaluated Ruby code [OK]

Common Mistakes:

• Expecting original lowercase instead of upcase
• Thinking <% %> outputs text
• Confusing string literal with method call

4. Identify the error in this ERB snippet:

<ul>
  <% items.each do |item| %>
    <li><% item.upcase %></li>
  <% end %>
</ul>

medium

A. Syntax error in the loop declaration

B. Missing output tag; item.upcase won't display

C. Extra closing tag <% end %> is invalid

D. Using <%# %> instead of <% %> for code

Solution

1. Step 1: Check the ERB tags around item.upcase

   The code uses <% item.upcase %> which runs Ruby but does not output anything.

2. Step 2: Understand output requirement

   To show the uppercase text, it should use <%= item.upcase %> instead.

3. Final Answer:

   Missing output tag; item.upcase won't display -> Option B

4. Quick Check:

   Use <%= %> to output values [OK]

Hint: Use <%= %> to output, <% %> only runs code [OK]

Common Mistakes:

• Confusing <% %> with output tag
• Thinking loop syntax is wrong
• Believing extra end tag causes error

5. You want to conditionally display a message in ERB only if user.admin? is true. Which snippet correctly does this?

hard

A. <% if user.admin? %>Welcome, admin!<% end %>

B. <%= if user.admin? %>Welcome, admin!<% end %>

C. <% if user.admin? %><% 'Welcome, admin!' %><% end %>

D. <%= user.admin? ? 'Welcome, admin!' %>

Solution

1. Step 1: Understand conditional rendering in ERB

   <% if user.admin? %> starts an if block where literal text like "Welcome, admin!" is rendered only if true, ended by <% end %>.

2. Step 2: Why others fail

   B: Invalid syntax (<%= if %> can't start control flow like that). C: Inner <% %> runs code but outputs nothing. D: Incomplete ternary (missing : '').

3. Final Answer:

   <% if user.admin? %>Welcome, admin!<% end %> -> Option A

4. Quick Check:

   Conditional literal text output = <% if %>...<% end %> [OK]

Hint: Use <% if cond %> text <% end %> for conditional display [OK]

Common Mistakes:

• Using <% %> for text inside conditional (no output)
• Incomplete ternary missing : false_expr (syntax error)
• Using <%= if cond %> (invalid Ruby syntax)