Incorrect rendering of question box with multiple solutions in generated notebook

[hexhowells]

When creating a tutorial with a question box that contains multiple solution dropdowns the automatically generated Jupyter notebook doesn't generate the question box properly causing the cell to render incorrectly.

Here is a basic question box that replicates the issue:

> <question-title>Question Title</question-title>
>
> Question 1
>
> > <solution-title></solution-title>
> >
> > Solution 1
> >
> {: .solution}
>
> Question 2
>
> > <solution-title></solution-title>
> >
> > Solution 2
> >
> {: .solution}
>
> Question 3
>
> > <solution-title></solution-title>
> >
> > Solution 3
> >
> {: .solution}
>
{: .question}

Text after the question box doesnt get rendered correctly either

Rendered in the tutorial:

Rendered in the Jupyter notebook

The source code of the notebook cell:

<blockquote class="question" style="border: 2px solid #8A9AD0; margin: 1em 0.2em">
<div class="box-title question-title" id="question-question-title-7"><i class="far fa-question-circle" aria-hidden="true" ></i> Question: Question Title</div>
<p>Question 1</p>
<br/><details style="border: 2px solid #B8C3EA; margin: 1em 0.2em;padding: 0.5em; cursor: pointer;"><summary>👁 View solution</summary>
<div class="box-title solution-title" id="solution-134"><button class="gtn-boxify-button solution" type="button" aria-controls="solution-134" aria-expanded="true"><i class="far fa-eye" aria-hidden="true" ></i> Solution<span class="fold-unfold fa fa-minus-square"></span></button></div>
<p>Solution 1</p>
</details>
<p>Question 2</p>
<br/><details style="border: 2px solid #B8C3EA; margin: 1em 0.2em;padding: 0.5em; cursor: pointer;"><summary>👁 View solution</summary>
<div class="box-title solution-title" id="solution-135"><button class="gtn-boxify-button solution" type="button" aria-controls="solution-135" aria-expanded="true"><i class="far fa-eye" aria-hidden="true" ></i> Solution<span class="fold-unfold fa fa-minus-square"></span></button></div>
<p>Solution 2</p>
</blockquote>
<p>Question 3</p>
<br/><details style="border: 2px solid #B8C3EA; margin: 1em 0.2em;padding: 0.5em; cursor: pointer;"><summary>👁 View solution</summary>
<div class="box-title solution-title" id="solution-136"><button class="gtn-boxify-button solution" type="button" aria-controls="solution-136" aria-expanded="true"><i class="far fa-eye" aria-hidden="true" ></i> Solution<span class="fold-unfold fa fa-minus-square"></span></button></div>
<p>Solution 3</p>
</blockquote>
</blockquote>
<p>Text after the question box doesnt get rendered correctly either</p>

---

It looks like its generating a </blockquote> tag after every {: .solution} (not including the first one), however since the only opening blockquote tag is at the start of the question box this causes the rest of the cell's rendering to break.

[hexylena]

Thanks for filing this @hexhowells

As documentation for everyone else: The current workaround is to separate it into multiple question boxes. We would like to fix this at some point.