Fix usage of bootstrap panels for quizes and questions

[gadenbuie]

Currently, quizzes with multiple questions created via this markdown

```{r quiz}
quiz(
  question("Which package contains functions for installing other R packages?",
    answer("base"),
    answer("tools"),
    answer("utils", correct = TRUE),
    answer("codetools")
  ),
  question("Which of the R packages listed below are used to create plots?",
    answer("lattice", correct = TRUE),
    answer("tools"),
    answer("stats"),
    answer("grid", correct = TRUE)
  )
)
```

result in this HTML markup

<p>
  <div class="panel-heading tutorial-quiz-title"><span data-i18n="text.quiz">Quiz</span></div>
</p>
<div class="panel panel-default">
  <div data-label="quiz-1" class="tutorial-question panel-body">
    <div id="quiz-1-answer_container" class="shiny-html-output"></div>
    <div id="quiz-1-message_container" class="shiny-html-output"></div>
    <div id="quiz-1-action_button_container" class="shiny-html-output"></div>
  </div>
</div>
<div class="panel panel-default">
  <div data-label="quiz-2" class="tutorial-question panel-body">
    <div id="quiz-2-answer_container" class="shiny-html-output"></div>
    <div id="quiz-2-message_container" class="shiny-html-output"></div>
    <div id="quiz-2-action_button_container" class="shiny-html-output"></div>
  </div>
</div>

The "broken" part is the usage of .panel-heading outside .panel. In the browser, the .panel-heading is pulled out of the <p> tag, but it still remains outside a .panel.

One approach would be to create nested panels with the quiz title in the .panel-heading of the parent .panel. On the other hand, I personally don't mind that the quiz questions aren't inside a parent container, although there's a strong argument that semantically they should be.

We might also want to rewrite the usage of .panel in questions to place the question prompt inside a .panel-heading div. But that may end up restricting usage of HTML in question prompts, which would be less preferable.