Picture of James Wan
Customisation of assessment retry button
by James Wan - Thursday, 18 November 2021, 5:49 AM
 

Hi everyone,

I would like to get some suggestions on easy ways to customise the assessment retry button. I'm using the Authoring Tool v0.3.0 and Adapt Framework v2.2.2, and my technical skill is not that good.

Picture of Chuck Lorenz
Re: Customisation of assessment retry button
by Chuck Lorenz - Thursday, 18 November 2021, 11:56 AM
 

Hi James,

"my technical skill is not that good": you're going to need to some knowledge of HTML and CSS. In short, you'll need to inspect the retry button to find a CSS class (or combination classes) to which you can apply new CSS style rules. You'll apply that new styling in the "Custom CSS/Less code" found in the project settings.

  • Assuming that "the assessment retry button" is retry button from adapt-contrib-assessmentResults, the CSS class that you'll target is likely to be something like "results-retry-button".
  • Inspect the Preview produced by the AT (or the running course). Use something like Dev Tools (press F12 key or Ctrl+Shift+I) to inspect the browser code.
  • In the AT's Custom CSS/Less code, you'll add your new styles somewhat like this example:
    .results-retry-button {
        border: 2px solid #000;
        background-color: #000080;
        color: white;
    }

Hope this gets you a step further down your path.