オンライン実験・調査の教示は文章または画像で行うことが多いと思いますが，もう少しインタラクティブな教示を行いたいという場合はintro.jsというライブラリを利用することができます。
Intro.js - Lightweight, user-friendly onboarding tour library
具体的なintro.jsを使った例は↑のサイトの「Live demo」ボタンをクリックすると見ることができます。1.ページ内の任意の要素の強調（強調したい部分以外を暗くする），2.強調した要素に対する文章の表示の2つを行うことができます。
lab.jsで教示を表示した際に同じように強調と説明を行うことができれば，単純に文章や画像で教示するよりもわかりやすいかもしれません。では，実際に実装してみます。
今回はintro.jsはCDNで読み込んで利用します。intro.jsを使うには，intro.jsだけでなく，専用のcssファイル（intro.js.css）も必要なので2つを読み込みます（CDNはインターネット接続が前提なので，オフライン環境で使う場合にはダウンロードしたファイルをstaticにアップロードしてもOKです）。
CDNで読み込む場合はlab.jsの起動用HTMLに <!-- load introJS and introJS css-->以下の2行を追加してください。
<head>
<meta charset="utf-8">
<title>Experiment</title>
<!-- viewport setup -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- lab.js library and experiment code -->
<!-- load introJS and introJS css-->
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/intro.min.js>"></script>
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/introjs.min.css>">
${ header }
</head>
これでライブラリを読み込めるので，あとはintro.jsのドキュメントに従って設定していきます。色々な設定がありますが，HTMLの任意の要素を強調し，そこに文章を表示するというデモを作ってみます。HTMLタグの中にdata-intro="xxxx"と記述するとその要素が強調され，文字列（"xxxx"）が表示されます。文字だけの説明だと少々わかりにくいので以下の画像をご覧ください。周りがグレーになっている部分は実際は白い背景なのですが，intro.jsの機能で暗く表示されています。そして，「はじめに」という文章が強調されています。
HTMLとして以下が書いてあります。↑の画像との対応を確認してみてください。
<span data-intro='ご参加ありがとうございます😃'>はじめに</span>
このように強調と文章を表示したいHTML要素にdata-introを記述した上で，introJs().start()を実行すると強調と文章表示が可能です。具体的には，intro.jsを利用したいコンポーネントのScriptで「run」のタイミングで以下のコードを記述してください。
//set run
//start introJS
introJs().start();
intro.jsにはdata-intro以外にも様々な要素があるので，intro.jsのドキュメントを参考に利用してみてください。
デモではデフォルトでは英語（back, next）のラベル「戻る」，「次へ」と日本語に変更していますが，「run」で実行する際のコードを以下のようにしています。
//set run
//start introJS
introJs().setOptions({
nextLabel: '次へ',
prevLabel: '戻る',
doneLabel: '終了'
}).start();