Atomic Jolt

Atomic Assessments allows you to customize the styling of assignments, items, and questions by injecting custom CSS rules into the page. You can specify a global or course level stylesheet or you can target individual items.

To specify a custom CSS stylesheet for Atomic Assessments to inject into assignments

1. Navigate to the gear at the top right of the connector (course settings)

2. Select Settings

3. Enter CSS into the Custom CSS Styles text box or (ADMINS ONLY) Global Custom CSS styles 
   
   

4. Save the settings.

When you preview or take an assignment, Atomic Assessment will inject the CSS you specified into the page.

When activities are rendered the global CSS will be inserted above any course specific CSS.

Target specific items with custom CSS tags

Atomic Assessments supports the following mechanism to target specific assignments and items using tags.

1. Create a tag type in the Item Bank > Tags tab with the name: css-class. Then, add a tag under that type with a specific name (e.g. rtl). 

2. Apply the tag (e.g. css-class:rtl) to items that you want to target.

3. When Atomic Assessments renders an item with a tag applied to it of type css-class, it adds a CSS class to the top level div for an item. The name of the CSS class is aj-custom-class-[tag name].
   
   For example:

   <div data-reference="0e766cc0-3320-444d-a116-70d4f4e0a453" class="inline-item aj-custom-class-rtl" data-index="0">

4. Set custom CSS for the course under the Atomic Assessments main settings that targets the injected css class.
   
   For example:

   div.aj-custom-class-rtl > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) div.lrn_possibilityList {
       direction:rtl;
       text-align:right;
   }