Add interactivity in Lesson (Quiz) tour steps (focus on block/element/options etc, insert block etc)

[Imran92]

Goal

While taking the Quiz tour, a step may have side effects. For example, when we Go to the Welcome to the Quiz block step, the Quiz block should get selected and focused on. When we reach the Changing the question type step, the dropdown for selecting question type should open with having true-false focused and selected.

Also, if the focus element is out of view, it should scroll to bring it inside view.

Full completion depends on https://github.com/Automattic/sensei/issues/7444. To complete this card in parallel to 7445, we can just add two dummy Previous and Next buttons on the screen (maybe in the sidebar) for now and implement this functionality.

Later, under https://github.com/Automattic/sensei/issues/7455 we will remove the dummy button and bind these interactions with the intended buttons.

The structure adopted here should be in sync with https://github.com/Automattic/sensei/issues/7446.

Context [Optional]

The target steps are these https://github.com/Automattic/sensei/issues/7445

This is an extra functionality from Sensei that doesn't exist in the GB or Woo product tour. So we have to implement it.

A possible way of doing this can be adding an optional property in each of the tour step the value of which will be a callback function. Lets say, the name of the property is, 'interactivityCallback'. So, when a step is rendered, this property function will be invoked. And this function can have code like the following that'll create the interactivity we want. For example, like the following code for focus -

const tourSteps = [
	{
		stepId: 'course-outline',
		title: 'Some Title',
		description: 'Some description',
		interactivityCallback: () => {
			dispatch( 'core/editor' ).selectBlock( courseOutlineBlock.clientId ); // Focuses on the Course List block.
		},
	},
	......
];

This is just a suggestion to explain the requirement. But we can implement it in any way we see fit.

The following are the steps with their required interactivity -

const tourSteps = [ 
  {
    title: 'Welcome to the Quiz block',
    description: 'Take this short tour to learn the fundamentals of the Quiz block.',
    interactivity: 'Focus on quiz block'
  },
  {
    title: 'Changing the question type',
    description: 'There are a variety of question types for you to choose from including Multiple Choice, True/False and File Upload. We’ll show how to configure a True/False question, but the other question types work similarly.',
    interactivity: 'Select the first empty Question block, set the Question Type to True/False and open the Question Type toolbar option'
  },
  {
    title: 'Adding a question',
    description: 'Click on an existing question to select it. Then type your question in the Question Title field.',
    interactivity: 'Select the Question Title of the first question, the cursor should blip on the title field.'
  },
  {
    title: 'Adding a question description',
    description: 'Enter any additional details about the question in the Question Description. This is optional.',
    interactivity: 'Select the Question Description'
  },
  {
    title: 'Setting the correct answer',
    description: 'Click the Right or Wrong toggle to set the correct answer.',
    interactivity: 'If the user changed the Question Type, add a new True/False question or select an existing True/False question. Select the Answers block'
  },
  {
    title: 'Adding answer feedback',
    description: 'Add feedback by opening the Answer Feedback section of the question block. This feedback is shown after the quiz has been graded.',
    interactivity: 'If the user changed the Question Type, add a new True/False question or select an existing True/False question. Expand the Answer Feedback section. Put the cursor inside the paragraph of the Correct Answer Feedback block'
  },
  {
    title: 'Adding a new or existing question',
    description: 'Click + to open the inserter. Then click the New Question or Existing Question(s) option.',
    interactivity: 'Quiz block’s inserter with focus on New Question'
  },
  {
    title: 'Configuring the question settings',
    description: 'Question settings are available in the sidebar after selecting a question. View the docs to learn more about each one.',
    interactivity: 'Select any question block and open the Block Settings if not already open. Focus on the Question settings section of the Question block'
  },
  {
    title: 'Configuring the quiz settings',
    description: 'Quiz settings are available in the sidebar after clicking the Quiz settings link. View the docs to learn more about each one.',
    interactivity: 'Select the quiz block. Open the Block Settings if not already open. Focus on the Quiz settings link and the Quiz settings section of the Quiz block'
  },
  {
    title: 'Congratulations!',
    description: "You've mastered the basics. View the [quiz docs](https://senseilms.com/documentation/quizzes/) to learn more. Restart tour",
    interactivity: 'If clicks on the Quiz link, open the doc in new tab. If clicks on Restart Tour, take user to the first step of the Tour'
  },
];

Scope

• Only the happy path. No need to consider the case if the user removes the Quiz block. In case we need any specific block for a step of the tour, like a Question block with the type 'True/False', we should add a Question block of type true/false.

Out of Scope

• Conditional interactions
• Showing a spotlight functionality like Woo's product tour

Acceptance Criteria

Scenario: Happy Path Given I have opened a Lesson and Added Quiz block When I am taking the Tour and going through the steps Then I can see the interactivity of each steps taking place

Resources

No response