Add Quiz Actions block

[donnapep]

Describe the solution you'd like

Create a block that handles the Complete Quiz, Save Quiz and Reset Quiz functionality. Each button block should support the same settings as the buttons in the Lesson Actions block.

Visibility

The Complete Quiz and Save Quiz buttons are displayed on the front-end if the user:

• Is logged in
• Is enrolled in the course
• Has completed the prerequisite lesson, if applicable
• Has not already received a quiz grade
• Has not already submitted the quiz and it's waiting to be graded

The Reset Quiz button is displayed on the front-end if the Allow Retakes setting is enabled and the user:

• Is logged in
• Is enrolled in the course
• Has completed the prerequisite lesson, if applicable

The Reset Quiz button only displays in the editor if the Allow Retakes setting is enabled.

Context

The block replaces these buttons:

Text

Quiz Actions Block Description

Enable a learner to perform specific actions for a quiz.

Complete Quiz Block Description

Enable a learner to submit the quiz. This block is only displayed if the prerequisite lesson has been completed and the quiz has not been submitted or graded.

Save Quiz Block Description

Enable a learner to save the quiz. This block is only displayed if the prerequisite lesson has been completed and the quiz has not been submitted or graded.

Reset Quiz Block Description

Enable a learner to reset their progress. This block is only displayed if the prerequisite lesson has been completed and quiz retakes are enabled.

[alexsanford]

Isn't the initial plan for quizzes to edit the Questions from the Lesson page and leave the frontend rendering as-is? If so, I'm not sure I understand how this block fits in. That said, I could see it being useful down the road if we move to editing the Quiz in a dedicated editor.

[matticbot]

➤ donnapep commented:

Are you saying that we shouldn't give people the ability to customize the quiz buttons like we do for lessons? If so, I see that as a bit of a barrier to people adopting blocks. The buttons on the lessons page will look a lot different from the buttons on the quiz page, creating a UI that doesn't tie together very well.

[alexsanford]

Are you saying that we shouldn't give people the ability to customize the quiz buttons like we do for lessons?

I agree that this is important to do. But it wasn't clear to me that this was going to be needed in the first iteration. We'll need to dig into a few design and implementation questions, such as:

• Should this be a separate block, or part of the "Quiz" block?
• If it's a separate block, does it only exist inside of the "Quiz" block? How does that affect the Question blocks (which are currently the only blocks allowed inside the Quiz)? If it's possible to move this block in between Questions, for example, does that cause problems, technical or otherwise?
• If it is simpler to make this a part of the Quiz block rather than a separate block, do we think that's a good long-term choice?
• It's worth trying to understand how this affects the user experience. The Quiz/Questions block is already a bit awkward, since currently it's in the Lesson editor but doesn't actually affect the Lesson page (it affects the Quiz page). If we include the buttons, would that increase the potential confusion in a significant way?

I wonder if it would be worthwhile to come up with some rough designs and chat about this on our next design call?

cc @yscik

[yscik]

We can have it inside the ---- Lesson Quiz ---- section introduced in #3963, which makes things a bit clearer. The technical side is probably adding another container block with the locked template of [ 'questions', 'quiz-actions' ] blocks, which would keep the buttons always below the questions.

An earlier design on this:

[alexsanford]

The "Lesson Quiz" section makes things clearer 👍

adding another container block

So would the hierarchy look like this?

• Quiz Block
  • Questions Block
  • Question Block 1
  • Question Block 2
  • ...
  • Question Actions Block

I wonder if that's starting to get a bit complex. Users might not understand what the "Questions" block is or why they need it. Even if the template is locked, they would potentially need to navigate the hierarchy.

Would it be problematic to have this instead?

• Quiz Block
  • Question Block 1
  • Question Block 2
  • ...
  • Question Actions Block

Technically, this would allow for the Question Actions Block to be placed between Question blocks, which doesn't make much sense. But I wonder if the simplicity of the UX might be a good trade-off?

cc @pablohoneyhoney @sruj09

[yscik]

Yes, that's a lot more effort and complicated hacks to get working properly (keeping the buttons below the questions, tweaking the inserter). It's not really a realistic option.

I don't think questions being inside a "Questions" block would be too confusing. If we ever move the quiz to it's own editor, this is how it would work too.

[alexsanford]

keeping the buttons below the questions

Would this be necessary, though?

tweaking the inserter

Assuming it isn't a problem to allow the Actions to be anywhere, then maybe we wouldn't need to tweak the inserter? Except maybe to only allow one instance of the Actions, but that's easy.

(BTW I'm not necessarily arguing one way or another, just want to make sure we explore all of the options 🙂 )

[yscik]

I'm not seeing how that would be a better experience for the user. Having submit buttons in the middle of a list of question sounds a lot more confusing than an extra container block in the hierarchy. The simple action of adding one more question to the end of the list would also become problematic if we do nothing to tweak it.