challenges.html

<div class="container-fluid" ng-app="challengesApp" ng-controller="challengesCtrl" ng-init="init()">
    
    <span ng-show="challengesAvailable">
    <p>Complete the lessons below to advance to the next level. Click on the lesson name to expand/collapse the description.</p>
    <p>
        <span class="oi oi-info"></span>
        Try to think how the concepts that are demonstrated in the lesson apply to your own code. 
        While examples may not match the platform or language you are familiar with, the concepts apply to any software: desktop applications, mobile applications or operating system services.
    </p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: {{percentDone}}%" aria-valuenow="{{percentDone}}" aria-valuemin="0" aria-valuemax="100">
        {{completionLabel}}
        </div>
    </div>
    <div ng-repeat="level in moduleChallengeDefinitions" style="padding-top:10px">
        <div ng-repeat="challenge in level.challenges" style="padding-top:5px">
            <div class="card">
                <div class="card-header">
                    <a class="text-light" data-toggle="collapse" role="button" data-target="#collapse{{challenge.id}}" href="">
                        {{level.name}} : {{challenge.name}} 
                        <span class="oi oi-check float-right" ng-if="challenge.passed"></span>
                        <span class="float-right" ng-if="challenge.passed">&nbsp;</span>
                    </a>
                </div>
                <div id="collapse{{challenge.id}}" class="panel-collapse collapse"  ng-class="{'show':!challenge.passed}">
                    <div class="card-body">
                    
                        <div ng-include="getDescriptionLink(challenge.id)" highlight-code></div>        
                       
                        <span ng-if="hasCodeBlocks(challenge)">
                        <br/>
                        <h4>Code Blocks Associated with the Challenge</h4>
                        <ul>
                            <li ng-repeat="codeBlockId in challenge.codeBlockIds"><a target="_blank" rel="noopener noreferrer" ng-href="#!codeBlocks/{{codeBlockId}}">{{codeBlocks[codeBlockId].name}}</a></li>
                        </ul>
                        </span>
                        
                        <span ng-if="challenge.attackGram" >
                        <br>
                        <h4>
                            Attack-Gram
                        </h4>
                        <p>
                            Here's a visual representation of one of the attacks possible using this category.
                            <br/>
                            <img ng-src="/static/lessons/attack-grams/{{challenge.attackGram}}" class="img-fluid img-thumbnail" alt="Attack-Gram for this category">
                        </p>

                        </span>
                        <br>

                        <span ng-if="userLevel+1<level.level">
                            <div class="alert alert-secondary">You cannot play this challenge yet</div>
                        </span>
                        <span ng-if="userLevel+1>=level.level">

                            <h4>Challenge</h4>
                            <span ng-if="challenge.mission">
                                <div class="alert alert-warning" style="color: black;">
                                    <strong>Mission:</strong>  {{challenge.mission}} 
                                </div>
                            </span>
                            <span ng-if="challenge.playLink">
                                <p>
                                    Click the button below to access the play link. 
                                </p> 
                                <a ng-if="challenge.playLink.indexOf('http')===0" 
                                    ng-href="{{challenge.playLink}}" target="_blank" rel="noopener noreferrer" class="btn btn-warning btn-sm">Play</a>
                                <a ng-if="challenge.playLink.indexOf('/') === 0 || challenge.playLink.indexOf('#') === 0 " 
                                    ng-href="{{targetUrl}}{{challenge.playLink}}" target="_blank" rel="noopener noreferrer" class="btn btn-warning btn-sm">Play</a>
                                <br/><br/>
                            </span>
                            <p ng-if="!challenge.playLink && challenge.type!=='quiz'">
                                The play link has been provided to you when solving the previous module or challenge. 
                                If you have missed it read the challenge description carefully and try to figure out what it is.
                            </p>
                            <div ng-if="challenge.question.code" class="alert alert-info" style="color: black;">
                                <textarea rows="10" readonly style="background-color: transparent; border: 0px; width: 100%">{{challenge.question.code}}</textarea> 
                            </div>

                            <span ng-if="challenge.options">
                                <div class="form-check" ng-repeat="op in challenge.options">
                                    <input class="form-check-input option-{{challenge.id}}" type="radio" value="{{op.value}}" name="option" id="option-{{challenge.id}}-{{$index}}">
                                    <label class="form-check-label" for="option-{{challenge.id}}-{{$index}}">
                                        {{op.display}}
                                    </label>
                                </div>
                            </span>

                            <span ng-if="!challenge.passed">

                                <span ng-if="challenge.options">
                                    <br>
                                    <a ng-click="submitOption(challenge.id, challenge.question.digest)" class="btn btn-info btn-sm" role="button">Submit Answer</a>
                                </span>

                                <span ng-if="challenge.type !== 'quiz'">
                                    <p>
                                        Once you were able to complete the challenge you can generate a code which you can submit below.
                                    </p>
                                    <a ng-href="#!submitCode/{{moduleId}}/{{challenge.id}}/page/0" class="btn btn-info btn-sm" role="button">Submit Code</a>
                                </span>

                                <span ng-if="challenge.type === 'quiz' && !challenge.options">
                                    <label for="answer-{{challenge.id}}">Answer:</label> &nbsp;
                                    <input type="text" autocomplete="off" class="form-control" style="width: 100%;" id="answer-{{challenge.id}}" value=""/>
                                    <br>
                                    <a ng-click="submitAnswer(challenge.id, challenge.question.digest)" class="btn btn-info btn-sm" role="button">Submit Answer</a>                                
                                </span>
                                
                            </span>
                            <span ng-if="challenge.solution" >
                            <br/><br/>
                            <h4>
                                Solution
                            </h4>
                            <p>
                                If you get stuck you can use the button below for help, but don't give up yet, read the challenge description and tips carefully.                            
                            </p>
                            <a ng-href="#!solution/{{challenge.id}}" class="btn btn-success btn-sm" role="button">View Solution</a>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </span>

    <div class="text-center" ng-show="isLoading()">
        <strong>Loading...</strong>
        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
    </div>

    <div class="alert alert-danger" role="alert" ng-show="!moduleId">
            You need to pick a training module first.
    </div>
    <span ng-show="challengesAvailable === false && moduleId">
        <div class="alert alert-secondary" role="alert" >
            Specified module is not available.
        </div>
    <button class="btn btn-secondary" onclick="window.history.back()">Back</button>
    </span>
    

    <br><br>
</div>