Asset pipeline basics in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include the main stylesheet in a Rails layout.

Ruby on Rails

<%= stylesheet_link_tag '[1]', media: 'all' %>

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

Adefault

Bapplication

Cmain

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent stylesheet name causes a 404 error.

Forgetting to include the stylesheet tag results in no styles applied.

The default main stylesheet in Rails is named application.css. Using stylesheet_link_tag 'application' includes it properly.

2fill in blank

medium

Complete the code to include the main JavaScript file using the asset pipeline helper.

Ruby on Rails

<%= javascript_include_tag '[1]' %>

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

Amain

Bscript

Capplication

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong JavaScript file name causes missing scripts.

Omitting the tag means scripts won't load.

The default JavaScript file in Rails asset pipeline is application.js. Using javascript_include_tag 'application' includes it correctly.

3fill in blank

hard

Fix the error in the asset path helper to correctly reference an image named 'logo.png'.

Ruby on Rails

<%= image_tag '[1]' %>

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

Alogo.png

Bassets/logo.png

C/images/logo.png

Dimages/logo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Adding folder paths causes broken image links.

Using absolute paths breaks asset pipeline processing.

In Rails asset pipeline, just the filename logo.png is enough. The helper knows to look in the assets/images folder.

4fill in blank

hard

Fill both blanks to create a CSS file that uses SCSS syntax and is processed by the asset pipeline.

Ruby on Rails

@import '[1]';

body {
  background-color: [2];
}

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

Avariables

B#fff

Cwhite

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Including underscore or extension in import causes errors.

Using invalid color values breaks CSS.

SCSS files can import other SCSS partials like _variables.scss by name without underscore or extension. Colors can be hex codes like #fff.

5fill in blank

hard

Fill all three blanks to create a JavaScript manifest file that requires jQuery, requires all files in a folder, and initializes a function on document ready.

Ruby on Rails

//= require [1]
//= require_tree [2]

$(document).ready(function() {
  [3]
});

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

Ajquery

B.

Cconsole.log('Ready!')

Djquery_ujs

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong require names causes missing libraries.

Forgetting the dot in require_tree misses files.

Not wrapping code in document ready causes errors.

The manifest uses require jquery to include jQuery, require_tree . to include all files in the current folder, and the function logs a message when the document is ready.