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.