Picture of Chris Gillison
assessmentResults modification
by Chris Gillison - Thursday, 24 November 2016, 7:43 PM
 

Hello everyone,

Using the Framework, I've been trying to modify the assessmentResults extension to include a div which displays just the final score. I've got the div displaying, but it's treating {{scoreAsPercent}} as text (i.e. displaying "{{scoreAsPercent}}" as opposed to the actual score!). My modifications are below (+screenshot). If anyone out there can point out where I'm going wrong / offer a better way I'd be eternally grateful. Many thanks. Chris

Modifications as follows...

assessmentResults.hbs:
<div class="results-inner component-inner">
    {{> component this}}
    <div class="results-widget component-widget">
        <div class="score-badge">{{{scoreBadge}}}</div>
     {{#if _isRetryEnabled}}...etc

within assessmentResults component in components.json:
"scoreBadge": "{{scoreAsPercent}}%",



Would be happy to use the "_retry".feedback for this purpose - it displays the score correctly, but is only visible if "_allowRetry" is set to true for all bands (which looks a bit daft if the user gets 100%!)


Picture of Chris Gillison
Re: assessmentResults modification
by Chris Gillison - Thursday, 24 November 2016, 9:16 PM
 

Replying to my own post! The last paragraph got me thinking and I've found some sort of a solution (albeit not that elegant)...

1) Got rid of the div (see above) in assessmentResults.hbs

2) adapt-contrib-assessmentResults.js added 3 lines to checkRetryEnabled() function:
var showRetryButton = state.feedbackBand._showRetryButton !== false;
var retryButtonShown = showRetryButton;
this.model.set("_showRetryButton", retryButtonShown);

3) components.json (assessmentResults component):

"_retry": {

    "feedback": "{{scoreAsPercent}}%"
}

4) components.json (bands that fail):

"_allowRetry": true,
"_showRetryButton": true

5) components.json (bands that pass):

"_allowRetry": false,
"_showRetryButton":false

 

6) assessmentResults.hbs (wrapped display of retry button within an 'if')

<div class="results-inner component-inner">
    {{> component this}}
    <div class="results-widget component-widget">
        {{#if _isRetryEnabled}}
        <div class="results-retry component-feedback">
            <div class="results-retry-inner component-feedback-inner">
                {{{a11y_text retryFeedback}}}
            </div>
            {{#if _showRetryButton}}
            <div class="results-retry-button">
                <button>{{#if _retry.button}}{{_retry.button}}{{else}}Retry{{/if}}</button>
            </div>
            {{/if}}
        </div>
        {{/if}}
    </div>
</div>

That's doubtless very cack-handed (and the coders amongst us are sniggering!) but it does do the job! Any easier way to achieve the same thing would be very welcome, and I shall bow to your coding prowess!

Picture of Tom Greenfield
Re: assessmentResults modification
by Tom Greenfield - Tuesday, 29 November 2016, 12:20 PM
 

Hi Chris,

You could just change the _completionBody to something like "<span class='left'>{{{feedback}}}</span><span class='right'>{{scoreAsPercent}}%</span>" and style the spans as appropriate.

Something like display: inline-block; and width: 50%; will get you started.

This approach negates the need to modify templates and code.

Cheers,
Tom.