Customizing Print Result Screen in Articulate Storyline

Customizing-print-results-in-Articulate-Storyline

Articulate Storyline allows the feature to take print of the result screen. But Storyline doesn’t give an option to customize the branding of the result screen. It is possible to customize the results page using HTML and CSS.

Here is the plugin which is compatible with Articulate Storyline 2, Articulate Storyline 3 and Articulate Storyline 360. In this blog we will demonstrate how to customize the result screen.

Step 1:

Download the plug-in from the given sample at the bottom.

Step 2:

After downloading, navigate to the location:

Storyline output\story_content\report.html

Customizing print result screen in Articulate Storyline_001

Replace the “report.html” file with downloaded file.

Customizing print result screen in Articulate Storyline_Img_002

Now, let’s see how to customize different sections of the result page. Open the downloaded file “report.html” in a text editor tool.

Changing the Title background color:

Navigate to line 124 and change the background color.

Before:

Customizing print result screen in Articulate Storyline_Img_003

After:

Customizing print result screen in Articulate Storyline

Changing the table header background color:

Navigate to line 68 and change the background color.

Before:

Customizing print result screen in Articulate Storyline

After:

Customizing print result screen in Articulate Storyline

Changing table row background color:

Navigate to line 58 and 62 to change the background color.

Before:

Customizing print result screen in Articulate Storyline

After:

Customizing print result screen in Articulate Storyline

Changing title text color:

Navigate to line 125 and change the text color.

Before:

Customizing print result screen in Articulate Storyline

After:

Customizing print result screen in Articulate Storyline

Changing Table header text color:

Navigate to line 69 to change the text color.

Before:

Customizing print result screen in Articulate Storyline

After:

Customizing print result screen in Articulate Storyline

Changing table row text color:

Navigate to line 54 to change the text color.

Customizing print result screen in Articulate Storyline

Changing the “Correct” and “Incorrect” text color:

Navigate to line 93 to change text color.

Customizing print result screen in Articulate Storyline

Note:

This code doesn’t work in offline mode or on local drive. You can upload the course on server or LMS to see the output.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *