ERB template syntax in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to output the value of name in an ERB template.

Ruby on Rails

<p>Hello, <%= [1] %>!</p>

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

Aname

Bprint(name)

Cecho name

Dputs name

Attempts:

3 left

💡 Hint

Common Mistakes

Using Ruby methods like print or puts inside <%= %> which is unnecessary.

Forgetting to use <%= %> and using <% %> which does not output.

In ERB, <%= %> outputs the value of the Ruby expression inside. You just need the variable name name to display its value.

2fill in blank

medium

Complete the ERB code to run Ruby code without outputting anything.

Ruby on Rails

<% [1] %>

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

Aputs x

Bx

Cx = 5

Dprint x

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to output with <%= %> when you only want to run code.

Using methods like puts or print inside <% %> which won't show output.

Use <% %> to run Ruby code without output. Assigning x = 5 inside is correct.

3fill in blank

hard

Fix the error in this ERB code to correctly output the result of 2 + 3.

Ruby on Rails

<%= 2 + [1] %>

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

A2

B+

Cfive

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the plus sign again causing syntax errors.

Using a word like 'five' which is not a number.

The expression 2 + 3 adds two numbers. You need to fill in 3 to complete it.

4fill in blank

hard

Fill both blanks to create a loop in ERB that outputs numbers 1 to 3.

Ruby on Rails

<% (1..3).[1] do |num| %>
  <p><%= num [2] 0 %></p>
<% end %>

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

Aeach

B+

C%

Dtimes

Attempts:

3 left

💡 Hint

Common Mistakes

Using times on a range which is invalid.

Using % instead of + inside the output, causing division by zero.

each loops over the range 1 to 3. Inside, num + 0 outputs the number itself (1, 2, 3).

5fill in blank

hard

Fill all three blanks to create a conditional in ERB that outputs 'Even' or 'Odd' for numbers 1 to 3.

Ruby on Rails

<% (1..3).each do |num| %>
  <% if num [1] 2 [2] 0 %>
    <p>Even</p>
  <% else %>
    <p>[3]</p>
  <% end %>
<% end %>

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

A%

B==

COdd

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using != instead of == causing logic errors.

Forgetting to output 'Odd' in the else block.

The condition checks if num % 2 == 0 to find even numbers. If true, it outputs 'Even', else outputs 'Odd'.

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)