Code block modifications

This part concerns interactions as well as rubric blocks or any other content section. Besides the usual way of editing your styles you can also choose to use them only on items that have certain scopes. A scope in this context is a CSS class on the item that can be added or removed by the item author.

If you don't require scopes you can from here proceed to the recipes immediately.

Using scopes

To make scopes available some programming steps are required. The directory tao-extension-features/per-item-styles contains all applicable files. Make sure to replace __myExtensionId__ everywhere by the actual name of your extension.

Configuration

Let's say, you want one or more interactions to have a thick red border all around. Edit the variable blocks inside customerExtension/views/js/cssBlocks/cssConfig.js like this:

var blocks = [
    {
        className: 'thick-red-border',
        label: __('Thick red border')
    }
];

Do this for all the custom styles you want to add. In the style section of the item editor this will create a checkbox with a label for each entry that allows the item author to apply a scope to the item.

SCSS

The thick red border should be used on the example-interaction. An untouched _example.scss would look like this:

.example-interaction {
    // code applicable to all example-interactions in all items
}

Add a selector .__custom__thick-red-border {} to _example.scss. Note that the __custom__ prefix is always added to avoid conflicts. Now copy the skeleton code between the brackets and your file will look like this:

.example-interaction {
    // code applicable to example-interactions in all items
}

.__custom__thick-red-border {    
    .example-interaction {
        // code applicable to example-interactions in items that have the class __custom__thick-red-border
    }
}

You can do this either on one or multiple interactions or in _all-interactions.scss.

Recipes

None of the recipes uses custom scopes but obviously they can be used inside one.

Center picture

Turns all pictures inside an interaction into block elements and centers them.

Example in _all-interactions.scss

Remove instructions

Hides the message boxes that are available above all block interactions. You can also use specific classes, e.g. .instruction-container.feedback-warning instead of .instruction-container to address only certain instructions. Available types are .feedback-error, .feedback-info, .feedback-success and .feedback-warning.

Example in _all-interactions.scss

Text entry interactions with fixed sizes

Text entry interactions usually have a style attribute that indicates the length of the expected text (http://tinyurl.com/expectedLength), this recipe will apply a fixed size instead.

Text entry fixed size

Example in _text-entry.scss

Move bullets to the left side of a checkbox

Choice interactions can have bullets or enumeration of all types available for <ol> or <ul>. With the regular stylesheet the order from left to right is checkbox/radio button, then enumeration, then label. This recipe moves the enumeration to the left of the checkbox.

Example

Example in _choice.scss

Display multiple choice interactions as one table

In this one multiple horizontal choice interactions are displayed similarly to a match interaction. The order of each row is prompt, then checkbox/radio button one, then checkbox/radio button two etc. The checkbox/radio button labels must be the same on each row and will be used as table headings.

Two choices

Three choices

Example in _choice.scss

Gap Match as a listing

The choices of a gap match interaction will be displayed like a regular unordered list.

Example in _gap-match.scss