Challenge List Template | Axero Documentation

The Challenge List template displays badge challenges and the current user's completion status. The template is a built-in template and comes with your Axero site. To use the template, complete the following steps:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Filter by the challenge content type
4. Select the Challenge List template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-section axero-section-challenges">
    {{#if ShowWidgetHeader}}
    <h3>{{{WidgetTitle}}}</h3>
    <p>{{{Resources.ChallengesTipText}}}</p>
    {{/if}}
    <ul class="articlelist challengelist">
        {{#each Contents.Challenges}}
        <li>
            <div class="row-fluid  ct-list-content">
                <div class="span2">
                    <a href="{{AwardContentURL}}">
                        <img src="{{AwardContentImageURL}}" class="axero-article-list-image postTitleImage" title="{{{AwardContentTitle}}}">
                    </a>
                </div>
                <div class="span10">
                    <h4><a href="{{AwardContentURL}}">{{{ProcessTitle}}}</a></h4>
                    <div class="axero-article-list-description">
                        {{{ProcessDescription}}}
                    </div>
                    <div class="axero-article-list-idea-properties">
                        {{OthersUsersCompletedCountString}}
                    </div>
                    <div class="axero-challenge-status">
                        {{#if DateCompletedString}}
                        <div class="challenge-status status-complete">
                            <i class="icon-check-sign"></i> {{../Resources.StepCompletedText}}
                        </div>
                        {{else}}
                        <div class="challenge-status status-incomplete">
                            <i class="icon-check-empty"></i> {{../Resources.IncompleteText}}
                        </div>
                        {{/if}}
                    </div>
                </div>
            </div>
        </li>
        {{/each}}
    </ul>
	{{#unless Contents.Challenges}}{{Resources.NoChallengesText}}{{/unless}}
</div>

<script type="text/javascript">
    jQuery(function() {
        initWidgetScroll({
            ItemSelector: '.challengelist li',
            PageLength: {{Contents.PageLength}},
            ListContainerSelector: '.challengelist',
            {{#if Contents.ParentContentID}}ParentContentID: {{Contents.ParentContentID}},{{/if}}
            WidgetID: {{WidgetID}}
        });
    });
</script>