<!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="pragma" content="no-cache" />
</head>

<body class="async-content">
    <main data-bind='template: { afterRender: renderingFinished }'>
        <img style="width: 200px; height: 50px;" data-bind="attr: { src: logoUrl }">

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

        <!-- ko if: hasIntroductionContent -->
        <h3 data-bind="html: introductionContent"></h3>
        <!-- /ko -->

        <!-- ko foreach: { data: sections, as: 'section' } -->
        <!-- ko if: section.questions.length > 0 -->
        <h2 data-bind="text: section.title"></h2>

        <article>

            <!-- ko foreach: { data: section.questions, as: 'question' } -->
            <div>

                <h3 data-bind="text: question.title"></h3>

                <!-- ko if: question.learningContents.length > 0 -->
                <section>
                    <!-- ko foreach: question.learningContents -->
                    <h4 data-bind="html: html"></h4>
                    <!-- /ko -->
                </section>
                <!-- /ko -->

                <!-- ko if: question.questionInstructions.length > 0 -->
                <section>
                    <!-- ko foreach: question.questionInstructions -->
                    <h4 data-bind="html: html"></h4>
                    <!-- /ko -->
                </section>
                <!-- /ko -->

                <!-- ko if: question.type == 'singleSelectText' -->
                <ul data-bind="foreach: question.answers">
                    <li data-bind="text: text"></li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'multipleSelect' -->
                <ul data-bind="foreach: question.answers">
                    <li data-bind="text: text"></li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'singleSelectImage' -->
                <ul data-bind="foreach: question.answers">
                    <li>
                        <img data-bind="attr:{ src: image }">
                    </li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'fillInTheBlank' -->
                <section data-bind="html: question.content"></section>
                <!-- /ko -->

                <!-- ko if: question.type == 'textMatching' -->
                <ul data-bind="foreach: question.answers">
                    <li>
                        <div data-bind="text: key"></div>
                        <div data-bind="text: value"></div>
                    </li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'rankingText' -->
                <ul data-bind="foreach: question.answers">
                    <li data-bind="text: text"></li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'statement' -->
                <ul data-bind="foreach: question.answers">
                    <li data-bind="text: text"></li>
                </ul>
                <!-- /ko -->

                <!-- ko if: question.type == 'dragAndDropText' -->
                <div>
                    <ul data-bind="foreach: question.dropspots">
                        <li data-bind="text: text"></li>
                    </ul>
                    <img data-bind="attr:{ src: background }" />
                </div>
                <!-- /ko -->

                <!-- ko if: question.type == 'hotspot' -->
                <div>
                    <img data-bind="attr:{ src: background }" />
                </div>
                <!-- /ko -->

            </div>
            <!-- /ko -->

        </article>
        <!-- /ko -->
        <!-- /ko -->
    </main>

    <script src="scripts.js?v=1505368208574"></script>

</body>

</html>