The Wizard Tour Flow

December 19, 2022

8 mins

command

This article shows how to create a simple wizard tour flow UI with minimal JavaScript.

Most people imagine an elderly man with magical abilities, like Dumbledore from Harry Potter when they hear the word “wizard.” Sadly, this has little to do with the technical term, but it can work wonders when building user interfaces.

What is the Wizard tour flow?

A wizard is a setup assistant that leads the user through a set of requirements or procedures that must be fulfilled in order to finish a task. The order in which wizard panels operate is determined by the Wizard tour flow. Wizard panels can either follow a single process flow from beginning to end or they can diverge into numerous separate process flows.

In simple words, “Wizard tour flow” is essentially a tour of the entire page or website. For a better understanding, check out the sample below.

The website walks the user through the “Wizard tour flow” of all the features and other content that are present in the website when they enter a new website or any new platform that they have never visited before, as shown in the example above. From this guide, the user gets a fundamental understanding of the website and how to use it. Wizard Tour flows are frequently used in mobile apps, particularly games.

IMPLEMENTATION:

The Wizard tour flow requires more lines of JS code to implement, however, by using a simple example we will demonstrate how to construct the wizard tour flow in a step-by-step manner with minimal JS code.

PREPARATIONS:

For this wizard tour flow implementation, I have used HTML Code structure along with CSS for styling and JS for interactions.

BASIC CODE STRUCTURE:

<html>
<head>
<meta charset="UTF-8">
<title>Wizard Tour Flow</title>
</head>
<style>
   {...css stylings } 
</style>
<body>
<div class = “wholePage”>
<h1 class="title">
<span>Title</span>
<div>
         {...tooltip content}
</div>
</h1>
</div>
<script>
 {...Js functionality }
</script>
</body>
</html>

1. HTML AND CSS CODE IMPLEMENTATION

Step 1:

Create a Whole Container for the page which contains all the required elements.

Html Code:-

<div class="container">
 {...elements}
</div>

We must invoke the CSS property using the Class name. The class name and the property name ought to be identical.

Css Code:

.container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #f6f4ff;
text-align: center;
color: rgb(79, 50, 103);
}

To make the container occupy the entire page, we must use the CSS properties and values listed above (position, left, top, width, and height).
To align the elements inside the container, text-align is used.

Step 2:

Inside the container, we have to create the elements one by one.

Html Code:-

<h1 class="title">
<span>Wizard Tour Flow</span>
</h1>
<h2 class="subtitle">
<span>Step-by-Step guide and feature introduction</span>
</h2>
<div class="content">
<h3>A wizard is a series of pages that guide a user 
through a complex task. Allow the user to move through the pages.</h3>
<h3> Wizard panels can move in a straight line from 
start to finish, or branch into several different process flows.</h3>
<h3>Typically In Wizard tour flow, each page collects a piece 
of information; when the user clicks the Finish button.</h3>
</div>

Css Code:

.title{
padding: 30px;
width: 300px;
margin: 0 auto 20px;
position: relative;
}
.subtitle{
padding: 30px;
width: 500px;
margin: 0 auto 30px auto;
position: relative;
}
.content{
display: flex !important;
padding: 30px 0;
width: 80%;
margin: 0 auto;
position: relative; 
}
p{
margin: 0 0 30px 0;
font-size: 1rem;
}

h3{
margin: 0 50px;
 }

The position property is positioned relative to its normal position. Margin property ( margin: top right bottom left ) 0px & 30px is given for top & bottom and auto is given for right and left to make the element centre.
The display flex property is for Flexible Box Layout Module. The important rule will override all previous styling rules for that specific property on that element!

Step 3:

First, we must specify a common class name for the elements and need to create a div block that contains buttons (next, skip) inside each element, that we are going to highlight on the web-page. By using onClick() event we have to call the Javascript function to traverse.

Classname = “tourflow”

Html Code:-

<h1 class="title tourflow">
<span>Wizard Tour Flow</span>
<div class="tooltip">
<p>Title of the Project</p>
<button class="next" onClick="nextStep()">next</button>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</h1>
<h2 class="subtitle tourflow">
<span>Step-by-Step guide and feature introduction</span>
<div class="tooltip">
<p>Sub Heading of the project</p>
<button class="next" onClick="nextStep()">next</button>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</h2>
<div class="content tourflow">
<h3>{...content}</h3>
<h3>{...content}</h3>
<h3>{...content}</h3>
<div class="tooltip">
<p>Content of the project</p>
<button class="skip" onClick="dismiss()">skip</button>
</div>
</div>

Css Code:

.tooltip{
font-size: 10px;
border: 1px solid;
border-radius: 15px;
color: #33363e;
font-weight: bold;
position: absolute;
bottom: -110px;
left: 50%;
display: none;
transform: translateX(-50%);
background: white;
padding: 1rem;
z-index: 2;
}
.tooltip::after{
content: "";
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
margin-left: -8px;
width: 0px;
height: 0px;
border-bottom: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}

The parent class must be relative and the child property must be absolute to put the tooltip where we need it to be. To position the tooltip, provide transform and position values.
The arrow mark at the top of the tooltip is the ::after selector, which inserts after the content of each selected element(s).

Step 4:

For Background blur, adding a div element inside the Container class.

Html Code:-

<div class="overlay">{for blurring the background}</div>

Css Code:

.overlay{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
display: block;
}

Note: The z-index property specifies the stack order of an element. A higher stack order element is always in front of a lower stack order element.

2. JAVASCRIPT CODE IMPLEMENTATION

While the page loads, the “tourflow” starts. Now we have to traverse them one by one.

Step 1:

JS Code:-

const collection = document.getElementsByClassName("tourflow");

By using HTML DOM elements, getting the elements which have the class name “tourflow” and assigning the objects to a block-scoped constant.

Step 2:

Html Code:-

<button class="next" onClick="nextStep()">next</button>

By clicking on the next button, the onClick event calls the nextStep() function

JS Code:

let index = 0;
nextStep();
function nextStep(){
Object.keys(collection).forEach( (item,i) => {
    i === index?(collection[i].classList.add("active")):inactive(i);
   })
   index++;
}

Css Code:

.active{
border: 1px solid;
background: #f6f4ff;
z-index: 2;
border-radius: 15px;
}
.tourflow.active .tooltip{
display: block;
}

By adding the above two classes, it overrides the existing Css. And it highlights the tooltip and tourflow content.

Initialising the index value to 0.
The title must be highlighted while the page loads. Therefore, initially invoking the nextStep() function.
The DOM Elements gather the elements as objects, so we have used Object.keys() and using forEach() for iterating the loop.
By using ternary operator, checking the condition that if the index = i then adding the active class to the collection element else invoking the inactive(j) function, to remove the active state from visited elements.

function inactive(j){
 collection[j].classList.remove("active");
}

5. This HTML DOM removes the class active from the element.

Step 3:

Html code:

<button class="skip" onClick="dismiss()">skip</button>

By clicking on the skip button, the onClick event calls the dismiss() function.

JS Code:

function dismiss(){
 bg[0].classList.add("overlay_inactive");
Object.keys(collection).forEach((item,i) => inactive(i));
}

Css Code:

.overlay_inactive{
display: none;
}

Adding overlay_inactive class, display: none property overrides the overlay class.
Using forEach() for iterating the loop and invoking the inactive() and removing the active class from all the elements. So the website looks normal.

Output: check output with below link

JSFiddle Code Platform: https://jsfiddle.net/Sreemaan_KCKS/6agy08v2/2/

Conclusion:

Wizards can assist users with limited domain knowledge by streamlining procedures and directing the users. As you carry on creating, I hope you have a better idea of how a wizard may significantly improve the satisfaction and comfort of your designs when it is created simply and with a specific aim in mind.

Meet the team!

Author

Sreemaan K C K S

Reviewed By

Kartheek M And Harinniy Gopikannan

Editor

Seema Jain

We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to careers@caratlane.com

This article shows how to create a simple wizard tour flow UI with minimal JavaScript.

What is the Wizard tour flow?

IMPLEMENTATION:

PREPARATIONS:

BASIC CODE STRUCTURE:

1. HTML AND CSS CODE IMPLEMENTATION

Step 1:

Step 2:

Step 3:

Step 4:

2. JAVASCRIPT CODE IMPLEMENTATION

Step 1:

Step 2:

Step 3:

Output: check output with below link

Conclusion:

Meet the team!

Discussions

Leave a Reply Cancel reply