Link and URL helpers in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a link to the home page with the text 'Home'.

Ruby on Rails

<%= link_to 'Home', [1] %>

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

Aroot_path

Bindex_path

Chome_url

Dmain_url

Attempts:

3 left

💡 Hint

Common Mistakes

Using URL helpers like home_url when the path helper is expected.

Using undefined helpers like index_path or main_url.

The link_to helper creates a link. Using root_path points to the home page route.

2fill in blank

medium

Complete the code to create a link to the user's profile page using the user object.

Ruby on Rails

<%= link_to 'Profile', [1] %>

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

Aprofile_path(user)

Buser_profile_path(user)

Cuser_path(user)

Duser_url(user)

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-standard helpers like user_profile_path or profile_path which may not exist.

Using URL helpers when path helpers are preferred for internal links.

The standard RESTful route for a user's show page is user_path(user).

3fill in blank

hard

Fix the error in the code to generate a link that opens in a new tab safely.

Ruby on Rails

<%= link_to 'Docs', docs_url, [1] %>

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

A{ target: '_blank' }

B{ target: '_blank', rel: 'noopener' }

C{ rel: 'nofollow' }

D{ target: '_self' }

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add rel: 'noopener' when using target: '_blank'.

Using target: '_self' which opens in the same tab.

To open a link in a new tab safely, use target: '_blank' and add rel: 'noopener' to prevent security risks.

4fill in blank

hard

Fill both blanks to create a link with a CSS class and a data attribute.

Ruby on Rails

<%= link_to 'Delete', post_path(post), [1]: 'delete', [2]: 'btn btn-danger' %>

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

Amethod

Bclass

Cdata

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using data instead of method for HTTP method.

Using style instead of class for CSS classes.

The method: 'delete' option tells Rails to send a DELETE request. The class: 'btn btn-danger' adds CSS classes for styling.

5fill in blank

hard

Fill all three blanks to create a link with a confirmation dialog, CSS class, and HTTP method.

Ruby on Rails

<%= link_to 'Logout', logout_path, [1]: 'delete', [2]: 'btn btn-warning', [3]: { confirm: 'Are you sure?' } %>

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

Amethod

Bclass

Cdata

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up data and method options.

Forgetting the confirmation dialog option.

method: 'delete' sends a DELETE request, class: 'btn btn-warning' styles the link, and data: { confirm: 'Are you sure?' } shows a confirmation popup.

Practice

1. What does the Rails helper link_to primarily do?

easy

A. Generates a plain URL string

B. Creates a clickable HTML link

C. Fetches data from the database

D. Starts a new Rails server

Solution

1. Step 1: Understand the purpose of link_to

   The link_to helper is designed to create clickable links in HTML pages.

2. Step 2: Differentiate from url_for

   Unlike url_for, which returns a URL string, link_to outputs an anchor tag with the link.

3. Final Answer:

   Creates a clickable HTML link -> Option B

4. Quick Check:

   link_to = clickable link [OK]

Hint: Remember: link_to makes links, url_for makes URLs [OK]

Common Mistakes:

• Confusing link_to with url_for
• Thinking link_to fetches data
• Assuming link_to starts server

2. Which of the following is the correct syntax to create a link to the home page with text 'Home' using link_to?

easy

A. link_to 'Home', root_path

B. link_to root_path, 'Home'

C. link_to 'Home' => root_path

D. link_to('Home' root_path)

Solution

1. Step 1: Recall link_to syntax

   The correct syntax is link_to 'Link Text', path_or_url.

2. Step 2: Match options to syntax

   link_to 'Home', root_path matches this pattern exactly. Others have wrong order or syntax errors.

3. Final Answer:

   link_to 'Home', root_path -> Option A

4. Quick Check:

   link_to text, path = link_to 'Home', root_path [OK]

Hint: link_to 'text', path always in that order [OK]

Common Mistakes:

• Swapping arguments order
• Using hash rocket => incorrectly
• Missing comma between arguments

3. What will be the output HTML of this Rails code?

link_to 'Profile', user_path(5), class: 'btn'

medium

A. Profile

B. Profile

C. Profile

D. Profile

Solution

1. Step 1: Understand link_to output

   The link_to helper creates an anchor tag with href set to the URL from user_path(5).

2. Step 2: Check URL and class attribute

   user_path(5) generates "/users/5". The class attribute is added as class="btn".

3. Final Answer:

   <a href="/users/5" class="btn">Profile</a> -> Option C

4. Quick Check:

   link_to with path and class outputs anchor with href and class [OK]

Hint: link_to outputs <a> with href from path helper [OK]

Common Mistakes:

• Forgetting href attribute
• Confusing button tag with link
• Wrong URL path format

4. Identify the error in this code snippet:

link_to 'Edit' edit_user_path user.id

medium

A. Missing parentheses around method argument

B. Incorrect method name, should be edit_user_url

C. link_to requires a block, not arguments

D. Missing comma between arguments

Solution

1. Step 1: Analyze link_to syntax

   The link_to helper requires comma-separated arguments for text and path.

2. Step 2: Check argument separation

   There is no comma between 'Edit' and edit_user_path user.id, causing a syntax error.

3. Final Answer:

   Missing comma between arguments -> Option D

4. Quick Check:

   Arguments must be comma-separated [OK]

Hint: Always separate arguments with commas in helpers [OK]

Common Mistakes:

• Omitting commas between arguments
• Confusing _path and _url helpers
• Thinking link_to needs a block always

5. You want to create a link that opens in a new browser tab with the text 'Docs' linking to https://guides.rubyonrails.org. Which is the correct link_to usage?

hard

A. link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener'

B. link_to 'Docs', 'https://guides.rubyonrails.org', new_tab: true

C. link_to 'Docs', url_for('https://guides.rubyonrails.org'), open_in_new: true

D. link_to 'Docs', 'https://guides.rubyonrails.org', open: '_new'

Solution

1. Step 1: Identify how to open link in new tab

   In HTML, target="_blank" opens a link in a new tab.

2. Step 2: Add security attribute

   Adding rel="noopener" prevents security risks when opening new tabs.

3. Step 3: Check options syntax

   link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener' correctly uses target: '_blank' and rel: 'noopener' as options in link_to.

4. Final Answer:

   link_to 'Docs', 'https://guides.rubyonrails.org', target: '_blank', rel: 'noopener' -> Option A

5. Quick Check:

   Use target: '_blank' and rel: 'noopener' for new tab links [OK]

Hint: Use target: '_blank' and rel: 'noopener' for safe new tabs [OK]

Common Mistakes:

• Using non-standard options like new_tab or open_in_new
• Forgetting rel: 'noopener' for security
• Using incorrect target values