<!DOCTYPE html>
<html>

<head>
    <title>easygenerator</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <link href='http://fonts.googleapis.com/css?family=Roboto:500,400,300,100,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="styles.css?v=1505368208574">
</head>

<body>
    <img class="course-logo" data-bind="attr: { src: logoUrl }">

    <h1 class="course-caption" data-bind="text: title"></h1>

    <!-- ko if: hasIntroductionContent -->
    <div class="course-intro-text styled-content content" data-bind="loadHtml: '../content/content.html?v=1505368208574'"></div>
    <!-- /ko -->
    <!-- ko foreach: { data: sections, as: 'section' } -->
    <!-- ko if: $root.filterQuestionTypes(section.questions).length > 0 -->
    <h2 class="section-info" data-bind="text: section.title"></h2>

    <div>

        <!-- ko foreach: { data: $root.filterQuestionTypes(section.questions), as: 'question' } -->

        <div class="question-body">

            <!-- ko if: question.type == 'informationContent' -->

            <h3 class="question-title" data-bind="text: question.title"></h3>
            <!-- ko if: question.learningContents.length > 0 -->
            <ul class="learning-content-items content">
                <!-- ko foreach: question.learningContents -->
                <li class="learning-content-item styled-content" data-bind="loadHtml: '../content/' + section.id + '/' + question.id + '/' + id + '.html?v=1505368208574'"></li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko ifnot: question.type == 'informationContent' -->
            <!-- ko if: question.learningContents.length > 0 -->
            <ul class="learning-content-items content with-icon">
                <!-- ko foreach: question.learningContents -->
                <li class="learning-content-item styled-content" data-bind="loadHtml: '../content/' + section.id + '/' + question.id + '/' + id + '.html?v=1505368208574'"></li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->
            <h3 class="question-title with-icon" data-bind="text: question.title, css: {survey: question.isSurvey}"></h3>

            <!-- ko if: question.questionInstructions.length > 0 -->
            <div class="question-content-wrapper">
                <!-- ko foreach: question.questionInstructions -->
                <div class="question-content styled-content" data-bind="loadHtml: '../content/' + section.id + '/' + question.id + '/' + id + '.html?v=1505368208574'"></div>
                <!-- /ko -->
            </div>
            <!-- /ko -->

            <!-- ko if: question.type == 'singleSelectText' -->
            <ul class="question-answers-list" data-bind="foreach: question.answers">
                <li class="radio">
                    <span class="radio-icon-wrapper">
                        <button class="radio-icon"></button>
                    </span>
                    <label class="radio-text" data-bind="text: text"></label>
                </li>
            </ul>
            <!-- /ko -->
            <!-- ko if: question.type == 'multipleSelect' -->
            <ul class="question-answers-list" data-bind="foreach: question.answers">
                <li class="checkbox">
                    <span class="checkbox-icon-wrapper">
                        <button class="checkbox-icon"></button>
                    </span>
                    <label class="checkbox-text" data-bind="text: text"></label>
                </li>
            </ul>
            <!-- /ko -->
            <!-- ko if: question.type == 'singleSelectImage' -->
            <ul class="single-select-image" data-bind="foreach: question.answers">
                <li class="select-image">
                    <div class="select-image-wrapper">
                        <span class="preview-thumbnail">
                            <img class="thumbnail" data-bind="attr:{ 'data-image': image, src: image + '?height=200&amp;width=250&amp;scaleBySmallerSide=true' }">
                        </span>
                        <button class="preview-button-wrapper"></button>
                    </div>
                    <div class="question-answer-radiobutton-wrapper">
                        <a class="question-answer-radiobutton">&nbsp;</a>
                    </div>
                </li>
            </ul>
            <!-- /ko -->
            <!-- ko if: question.type == 'fillInTheBlank' -->
            <div class="question-content-wrapper blank-content fill-in-the-blank">
                <div class="question-content blank-answers styled-content" data-bind="loadHtml: '../content/' + section.id + '/' + question.id + '/content.html?v=1505368208574'"></div>
            </div>
            <!-- /ko -->
            <!-- ko if: question.type == 'textMatching' -->
            <div class="text-matching-caption" data-translate-text="[text matching question pdf hint]">
                Сombine elements from the left column with the elements on the right
            </div>
            <!-- ko foreach: $root.shuffleKeyValues(question.answers) -->
            <div class="text-matching-row">
                <div class="text-matching-column">
                    <div class="text-matching-source-wrapper">
                        <div class="text-matching-source">
                            <div class="text-matching-source-text-wrapper">
                                <div class="text-matchig-source-text" data-bind="text: key"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-matching-column empty">&nbsp;</div>
                <div class="text-matching-column">
                    <div class="text-matching-target-wrapper">
                        <div class="text-matching-target">
                            <div class="text-matching-target-text-wrapper">
                                <div class="text-matching-target-text" data-bind="text: value"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko if: question.type == 'rankingText' -->
            <div data-bind="foreach: $root.shuffle(question.answers)">
                <div class="ranking-item">
                    <div class="ranking-item-box"></div>
                    <div class="ranking-item-text" data-bind="text: text"></div>    
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if: question.type == 'statement' -->
            <ul class="statement">
                <li class="statement-headers-group">
                    <div class="statement-option" data-translate-text="[statement question true text]" >
                        True
                    </div>
                    <div class="statement-option" data-translate-text="[statement question false text]">
                        False
                    </div>
                </li>

                <!-- ko foreach: question.answers -->
                <li class="statement-item">
                    <span class="statement-option ">
                        <span class="radio-icon-wrapper">
                            <button class="radio-icon"></button>
                        </span>
                    </span>
                    <span class="statement-option-separator-wrapper">
                        <span class="statement-option-separator"></span>
                    </span>
                    <span class="statement-option">
                        <span class="radio-icon-wrapper">
                            <button class="radio-icon"></button>
                        </span>
                    </span>
                    <span class="statement-label" data-bind="text: text"></span>
                </li>
                <!-- /ko -->
            </ul>
            <!-- /ko -->
            <!-- ko if: question.type == 'openQuestion' -->
            <div class="edit-field-wrapper">
                <textarea class="edit-field selectable"></textarea>
            </div>
            <!-- /ko -->
            <!-- /ko -->

        </div>

        <!-- /ko -->

    </div>
    <!-- /ko -->
    <!-- /ko -->
    <script src="scripts.js?v=1505368208574"></script>
</body>

</html>