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