app/views/course_front/index.html.erb
<% content_for :title, " - Kurs" %>
<%= render 'layouts/headers' %>
<body data-no-turbolink="true" ng-app="courseApp" ng-controller="myCtrl" ng-init="courseId='<%= params[:id] %>'; initCourse()">
<header class="margin-bottom-xs course-front-header">
<nav class="navbar course-navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="betaInfo">BETA</span>
<a href="/course_front/list" class="go-back-ico" title="Wróć do listy kursów" ng-hide="!inited"><%= image_tag 'backgarrow.png', alt: 'Apki.org', style: 'opacity:0.3' %></a>
<a class="navbar-brand" href="http://apki.org" style="z-index: 2; position: relative;"><%= image_tag 'logo.png', alt: 'Apki.org' %></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<h3 style="float:left; margin-left: 125px;" class="mrg10t">{{ course.data.title }}</h3>
<ul class="nav navbar-nav navbar-right">
<%- if current_user -%>
<li class="dropdown">
<a href="#" class="dropdown-toggle user-profile" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span id="loginImage" data-src="<%= current_user.image -%>" style="margin-right: 5px"></span>
<%= current_user.nickname -%>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to 'Mój profil', user_edit_profile_path -%></li>
<li><a href="#">Moje projekty</a></li>
<%- if current_user.account_type == :teacher -%>
<li role="separator" class="divider"></li>
<li><%= link_to 'Profil szkoły', school_edit_profile_path -%></li>
<li><%= link_to 'Nowy news', school_educator_news_path -%></li>
<%- end -%>
<li role="separator" class="divider"></li>
<li><%= link_to 'Wyloguj', signout_path -%></li>
</ul>
</li>
<%- else -%>
<li><a href="/auth/github">Zaloguj się</a></li>
<%- end -%>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div id="courseContent">
<div id="courseLoading" class="text-center col-md-10 col-md-offset-1" style="margin-top:60px" ng-hide="inited">
<i class="fa fa-cog fa-spin color-primary" style="font-size:48px"></i>
</div>
<div ng-hide="!inited" class="content-visible-when-not-loading">
<div id="courseLessonMenu" class="first col" ng-hide="resizeElements(1);!menuVisible.left">
<ul>
<li><i class="glyphicon glyphicon-align-justify"></i> <a href="#" ng-click="goToPart('article')">{{ getLesson().data.title }}</a></li>
<ul class="article-parsed">
</ul>
<li ng-hide="ytVideo==''"><i class="glyphicon glyphicon-facetime-video"></i> <a href="#" ng-click="fullSizeElement(false, false)">Wideo</a></li>
<li ng-hide="!exercises.length" ng-repeat="exerc in exercises" class="menu-exerc-{{exerc.id}} menu-to-check"><i ng-class="getExercIconClass(exerc.id)"></i> <a ng-if="isExercEnabled(exerc.id)" href="#" ng-click="goToPart('exercise', exerc.id)">{{ exerc.data.title?exerc.data.title:'Zadanie' }}</a><span ng-if="!isExercEnabled(exerc.id)" style="color:#E8E8E8">{{ exerc.data.title?exerc.data.title:'Zadanie' }}</span></li>
<li ng-hide="!quizzes.length" class="menu-quiz menu-to-check"><i class="glyphicon glyphicon-check"></i> <a href="#" ng-click="goToPart('quiz')">Quiz</a></li>
</ul>
</div>
<div class="col col-line-height-100-pro firstHidePanelBar" ng-click="hidePanelBarClick('left')"><span class="fa fa-angle-left" ng-if="menuVisible.left"></span><span class="fa fa-angle-right" ng-if="!menuVisible.left"></span></div>
<div id="courseCnt" class="sec col">
<div class="course-article course-element" ng-hide="!isPartVisible('article')" ng-bind-html="getLesson().data.article | to_trusted">
</div>
<div class="buttons" ng-if="isPartVisible('article')" style="margin:40px 25px 25px 60px;max-width:800px;">
<input type="submit" class="btn btn-lg btn-primary btn-save" value="Dalej" accesskey="n" ng-click="goToPart('exercise')" ng-if="ytVideo==''">
<input type="submit" class="btn btn-lg btn-primary btn-save" value="Dalej" accesskey="n" ng-click="fullSizeElement(false, false)" ng-if="ytVideo!=''">
</div>
<div class="fullscreen_movie course-element" ng-hide="!isPartVisible('fullscreen_movie')">
</div>
<div class="course-quiz course-element" ng-hide="!isPartVisible('quiz')">
<form id="quizForm">
<h2>Quiz</h2>
<div class="question-group q-{{quiz.id}}" ng-repeat="(key, quiz) in quizzes" autostatusremoval>
<h4><i class="glyphicon mrg10r" style="width:16px"></i> {{ quiz.data.question }}</h4>
<div class="question-ans" ng-repeat="(ans_idx, ans) in quiz.data.answers">
<input data-quiz-id="{{quiz.id}}" type="radio" id="quiz_question_{{quiz.id}}_{{ans_idx}}" name="quiz_question_{{quiz.id}}" value="{{ans_idx}}" class="mrg5r"> <label for="quiz_question_{{quiz.id}}_{{ans_idx}}">{{ans}}</label>
</div>
<div class="clearfix"></div>
</div>
<div class="buttons" ng-hide="quizzesAreCorrect || getLesson().data.quizPassed">
<div class="desc">Udziel poprawnie wszystkich odpowiedzi</div>
<button ng-disabled="quizChecking" ng-class="quizChecking?'active':''" type="button" ng-click="checkQuiz(this, $event)" class="btn btn-lg btn-primary btn-save has-spinner">
<span class="spinner"><i class="fa fa-cog fa-spin color-primary"></i></span><span class="not-spinner">Sprawdź odpowiedzi</span></button>
</div>
<div class="buttons" ng-if="(quizzesAreCorrect || getLesson().data.quizPassed) && (isPartVisible('quiz'))">
<div class="desc">Udzieliłeś poprawnych odpowiedzi na wszystkie pytania</div><input type="submit" class="btn btn-lg btn-primary btn-save" value="Dalej" accesskey="n" ng-click="goToPart('end')">
</div>
</form>
</div>
<div class="course-exercise course-element" ng-hide="!isPartVisible('exercise')">
<div class="col-md-5 mrg0a pad0a exercise-instr-window">
<div class="exercise-instruction">
<div class="pad25a" ng-bind-html="getExercise().data.content_of_exercise | to_trusted">
</div>
</div>
</div>
<div class="col-md-7 pad0a code-etc-window">
<label class="wcaghidden" for="editorTest">Uwaga! Niżej znajduje się edytor kodu, który nie wspera zasad WCAG. Nie można z niego nawigować tabem oraz może zmieniać jego treść. Zaleca się korzystanie z tekstowego edytora i wklejanie kodu tutaj aby nie korzystać z funkcjonlaności edytora, któa w niektórych przypadkach może zmniejszać dostępność.</label><div class="code-editor" id="editorTest" codeeditor source-lang="{{ getExercise().data.lang | server_source_lang_to_ace_lang }}" ng-if="getExercise()!==null" exerc-id="{{ getExercise().id }}"></div>
<div class="user-input-window" ng-hide="!getExercise().data.allow_user_input">
<label class="wcaghidden" for="codeUserInput">Dane wejściowe</label><input type="text" id="codeUserInput" value="{{ getExercise().data.default_user_input }}" style="width:100%" placeholder="Podaj tutaj dane wejściowe">
</div>
<div class="send-code-window buttons pad0a mrg0a" style="padding: 0 !important; margin:0 !important" ng-if="!exerciseIsCorrect">
<button ng-disabled="exerciseChecking" ng-class="exerciseChecking?'disabled':''" type="button" ng-click="checkExercise(this, $event)" accesskey="r" class="btn btn-lg btn-primary btn-save mrg5r" style="margin-top: 4px;">Sprawdź</button>
</div>
<div class="code-ok-window buttons pad0a mrg0a" ng-if="exerciseIsCorrect && isPartVisible('exercise')">
<div class="desc mrg20l" style="padding-top: 18px;">Gratulacje, Twój kod jest poprawny</div><input type="submit" class="btn btn-lg btn-primary btn-save mrg20r" style="margin-top: 4px;" accesskey="n" value="Dalej" ng-click="goToPart('exercise')">
</div>
<div class="pad0a exercise-console">
<div class="console-window mrg0a" ng-bind-html="exerciseCurrOutput | to_trusted">
</div>
</div>
</div>
</div>
<div class="course-end course-element text-center pad25a" ng-hide="!isPartVisible('end')">
<h2>Gratulacje, ukończyłeś lekcję <i>{{ getLesson().data.title }}</i>!</h2>
<div ng-if="!isCourseFinished()">
<button ng-click="nextLesson()" class="btn btn-lg btn-primary mrg25a">Przejdź do następnej lekcji</button>
</div>
<div ng-if="isCourseFinished()">
<h2>Gratulacje, ukończyłeś kurs <i>{{ course.data.title }}</i>! To już wszystko co przygotowaliśmy dla Ciebie w tym kursie.</h2>
<a href="javascript:$('#md-quest-form').modal();" class="btn btn-lg btn-primary mrg25a">Oceń ten kurs</a><br><br>
<a href="/#courseListAnchor" class="btn btn-lg btn-primary mrg25a">Sprawdź nasze inne kursy</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="secHidePanelBar" ng-click="hidePanelBarClick('bottom')"><span class="fa fa-angle-down" ng-if="menuVisible.bottom"></span><span class="fa fa-angle-up" ng-if="!menuVisible.bottom"></span></div>
<div id="courseLessons" ng-hide="resizeElements(1);!menuVisible.bottom">
<div class="lessonsProgressBar">
<div class="progress active" style="height:5px">
<div class="progress-bar" role="progressbar" ng-style="countLessonProgress()">
</div>
</div>
</div>
<div>
<div class="oneLessonDiv" style="float:left" ng-repeat="less in lessons">
<div class="img-circle" ng-class="getScope().course.data.lessonCurrent==less.id?'active':(getScope().course.data.lessonsPassed.indexOf(less.id)>-1?'':'inactive')" ng-click="userGoToLesson(less.id)" data-toggle="tooltip" data-placement="top" data-container="body" title="{{ less.data.title }}"><a href="javascript:;">{{ $index + 1 }}</a></div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="md-quest-form" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe src="https://docs.google.com/forms/d/1fOO9h_8cQoYFhG15FJswtlDMYzlsvO5Ok53iDFyyxQw/viewform" style="border: 0; width:100%; height:350px"></iframe>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>