<vertical_demo>
    <html_demo><h1>Problem Builder Demo</h1></html_demo>
    <problem-builder display_name="Basic Usage: Questions" weight="1" mode="standard">
        <html_demo>
            <p>At its most basic, a mentoring block can contain instructions (like this sentence), long answer questions, and various forms of multiple choice question.</p>

            <p>Here is an example of a long answer question:</p>
        </html_demo>

        <pb-answer name="fav-quote" question="What is your favourite quote (from a book, movie, speech, song, etc.)?">
        </pb-answer>

        <html_demo><p>Answer this one too:</p></html_demo>
        <pb-answer name="fav-food" question="What is your favourite food?">
        </pb-answer>

        <html_demo><p>Notice the submit button below will only be enabled once you have completed both questions.</p></html_demo>
    </problem-builder>

    <problem-builder display_name="Basic Long Answer Question" weight="1" mode="standard">
        <html_demo>
            <p>And here is an example of a Multiple Choice Question (MCQ):</p>
        </html_demo>

        <pb-mcq name="plain_mcq" question="Which book includes the line &quot;But I have one want which I have never yet been able to satisfy, and the absence of the object of which I now feel as a most severe evil. I have no friend.&quot;?" correct_choices='["frankenstein"]'>
            <pb-choice value="frankenstein"><em>Frankenstein</em></pb-choice>
            <pb-choice value="moby"><em>Moby-Dick; or, The Whale</em></pb-choice>
            <pb-choice value="twist"><em>Oliver Twist</em></pb-choice>
            <pb-choice value="darkness"><em>Heart of Darkness</em></pb-choice>
        </pb-mcq>

        <html_demo>
            <p>Notice that you can re-try the question as many times as you'd like.</p>
        </html_demo>
    </problem-builder>

    <problem-builder display_name="Multiple Choice Rating Question" weight="1" mode="standard">
        <html_demo>
            <p>Multiple choice questions can be configured with only one correct answer or with many accepted answers. There is also a special type of multiple choice question, a rating question, which provides a Likert Scale (5-point scale) prompt. Here is an example rating question where any answer is acceptable:</p>
            <p>How did you like <em>To Kill a Mockingbird</em>?</p>
        </html_demo>

        <pb-rating name="rate_mockingbird" low="I really disliked it" high="I loved it" correct_choices='["1","2","3","4","5"]' />
    </problem-builder>

    <problem-builder display_name="Multiple Response Question (and introducing tips)" weight="1" mode="standard">
        <html_demo><p>A fourth type of question is the Multiple Response Question (MRQ), which allows student to select multiple answers. Each answer can be marked as required, not required, or acceptable either way. The following question contains examples of each possibility. Try getting it wrong and see how it provides feedback to guide you to a correct answer.</p></html_demo>
        <pb-mrq name="future_movies" question="Which of these films are set in the future?" required_choices='["apes"]' ignored_choices='["2001"]'>
            <pb-choice value="starwars">Star Wars Episode V: The Empire Strikes Back</pb-choice>
            <pb-choice value="2001">2001: A Space Odyssey</pb-choice>
            <pb-choice value="apes">Planet of the Apes (1968)</pb-choice>

            <pb-tip values='["starwars"]'>Star Wars takes place "A long time ago in a galaxy far, far away"</pb-tip>
            <pb-tip values='["2001"]'>You could argue this one either way. When the film was released in 1968, it was set in the future. However, 2001 is now in the past.</pb-tip>
            <pb-tip values='["apes"]'>The majority of the film takes place in the year 3978.</pb-tip>
        </pb-mrq>

        <pb-message type="incomplete">
            <p>Not quite right! Try clicking on the checkmarks/exclamation marks to view <strong>tips</strong> that explain the answers.</p>
        </pb-message>

        <pb-message type="completed">
            <p>Nicely done. Even though you got this correct, you can still click on the checkmarks/exclamation marks to view <strong>tips</strong> that explain the answers.</p>
        </pb-message>
    </problem-builder>

    <problem-builder display_name="MCQ With Tips" weight="1" mode="standard">
        <html_demo>
            <p>Like the MRQ above, multiple choice and rating questions can also provide feedback based on which answer was selected and whether the answer is correct or not. Here's an example:</p>
        </html_demo>

        <pb-mcq name="subjunctive" question="Which sentence correctly uses the subjunctive case?" correct_choices='["d"]'>
            <pb-choice value="a">To buy or not to buy, that is the question.</pb-choice>
            <pb-choice value="b">Renting gives you more flexibility.</pb-choice>
            <pb-choice value="c">If I was you, I'd buy the house.</pb-choice>
            <pb-choice value="d">If I were you, I'd rent the house.</pb-choice>
            <pb-tip values='["a","b"]'>This sentence is not discussing hypotheticals or impossibilities.</pb-tip>
            <pb-tip values='["c"]'>This sentence should be using the subjunctive case since it's dicsussing a hypothetical, but "was" is the wrong case.</pb-tip>
            <pb-tip values='["d"]'>Correct. "was" has become "were" to indicate the subjunctive case.</pb-tip>
        </pb-mcq>

        <pb-message type="incomplete">
            <p>Read the tip above and try again.</p>
        </pb-message>

        <pb-message type="completed">
            <p>Nicely done. If I were you, I'd be proud of myself.</p>
        </pb-message>
    </problem-builder>

    <problem-builder display_name="Reviewing Answers">
        <html_demo><p>A student's responses to long answer questions can be displayed later in the course. (<strong>Note:</strong> If you're going through this demo all at once, you may need to refresh the page.) Below is your favorite quote.</p></html_demo>

        <pb-answer-recap display_name="Your Favorite Quote" name="fav-quote" />

        <html_demo><p>Answer recaps can also be displayed in table form:</p></html_demo>

        <pb-table>
            <pb-column header="Favorite Quote">
                <pb-answer-recap name="fav-quote" />
            </pb-column>
            <pb-column header="Favorite Food">
                <pb-answer-recap name="fav-food" />
            </pb-column>
            <pb-column header="Favorite City">
                <pb-answer-recap name="some-other-question" />

                <html_demo><p>(This column shows what an answer recap looks like when the student has not yet answered the particular question)</p></html_demo>
            </pb-column>
        </pb-table>
    </problem-builder>
    <problem-builder display_name="Assessment Example" mode="assessment">
        <html_demo><p>Mentoring questions can also be asked in "Assessment" mode, where each question is asked one at a time, and a final score is shown at the end. The author can set how many attempts each student is given to go through the assessment.</p></html_demo>
        <pb-mcq name="aq1" question="What is 7+3?" correct_choices='["ten"]'>
            <pb-choice value="ten">10</pb-choice>
            <pb-choice value="prime">104,297</pb-choice>
            <pb-choice value="infinity">Infinity</pb-choice>
            <pb-choice value="undefined">Undefined</pb-choice>
        </pb-mcq>
        <pb-mcq name="aq2" question="What is the square root of nine?" correct_choices='["three"]'>
            <pb-choice value="zero">1</pb-choice>
            <pb-choice value="three">3</pb-choice>
            <pb-choice value="nine">9</pb-choice>
            <pb-choice value="infinity">Infinity</pb-choice>
            <pb-choice value="undefined">Undefined</pb-choice>
        </pb-mcq>
        <pb-mcq name="aq3" question="What is 10&#247;0?" correct_choices='["infinity","undefined"]'>
            <pb-choice value="zero">0</pb-choice>
            <pb-choice value="ten">10</pb-choice>
            <pb-choice value="negten">-10</pb-choice>
            <pb-choice value="infinity">Infinity</pb-choice>
            <pb-choice value="undefined">Undefined</pb-choice>
        </pb-mcq>
    </problem-builder>
    <html_demo>
        <h1>See the details</h1>
        <p>Check out the XML source below to get an idea of how these mentoring questions were set up and what kind of options authors have available.</p>
    </html_demo>
</vertical_demo>
