usablica · Parvinmh · Apr 7, 2025 · Apr 9, 2025 · Apr 9, 2025 · Apr 10, 2025
diff --git a/example/RTL/index.html b/example/RTL/index.html
@@ -44,7 +44,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-title="یک عنوان کوتاه" data-intro="ویکی‌پدیا مقاله‌های رایگانی را ارائه می‌دهد که برای توزیع بیشتر در نظر گرفته شده‌اند و می‌توان آن‌ها را در زیر مدخل‌های واژگانی (لم) و همچنین پورتال‌ها بر اساس حوزه‌های موضوعی و فهرست‌های موضوعی یافت.">RTL Style</h1>
         <p class="lead" data-step="4"data-intro="یک مرحله دیگه">This is the <abbr lang="en" title="Right To Left">RTL</abbr> version of IntroJs which includes an addition CSS file to perform the RTL style.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'doneLabel': 'اتمام' }).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOptions({ 'nextLabel': 'بعد', 'prevLabel': 'قبل', 'doneLabel': 'اتمام' }).start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/auto-position/index.html b/example/auto-position/index.html
@@ -17,7 +17,7 @@
     <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
 	<script>
 		function startTour() {
-			var tour = introJs()
+			var tour = introJs.tour()
 			tour.setOption('tooltipPosition', 'auto');
 			tour.setOption('positionPrecedence', ['left', 'right', 'top', 'bottom']);
 			tour.start();

diff --git a/example/bootstrap/v3/index.html b/example/bootstrap/v3/index.html
@@ -83,7 +83,7 @@
             <div class="intro-text">
                 <div data-intro="This is the name of this site" class="intro-lead-in">Welcome To Our Studio!</div>
                 <div  data-intro="This is the main headline" class="intro-heading">It's Nice To Meet You</div>
-                <a href="javascript:void(0)" onclick="introJs().start();" class="page-scroll btn btn-xl">Start Introjs</a>
+                <a href="javascript:void(0)" onclick="introJs.tour().start();" class="page-scroll btn btn-xl">Start Introjs</a>
             </div>
         </div>
     </header>

diff --git a/example/callbacks/onbeforechange.html b/example/callbacks/onbeforechange.html
@@ -70,7 +70,7 @@ <h4>Section Six</h4>
 
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
         intro.onbeforechange(function () {
           if (this.currentStep() === 2) {
             alert('You cannot continue! :P')

diff --git a/example/disable-interaction/index.html b/example/disable-interaction/index.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="Interaction is disabled in this step" data-disable-interaction="1">Disable Interaction</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This page demonstrates the usage of <code>data-disable-interaction</code> attribute.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/disable-interaction/programmatic.html b/example/disable-interaction/programmatic.html
@@ -72,7 +72,7 @@ <h4>Section Six</h4>
     <script
 type="text/javascript">
       function startIntro() {
-        var intro = introJs();
+        var intro = introJs.tour();
 
         intro.setOptions({
           steps: [

diff --git a/example/groups/index.html b/example/groups/index.html
@@ -35,8 +35,8 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1>Groups</h1>
         <p class="lead">An example of grouping, with <code>data-intro-group</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start('odd');">Show me odds</a>
-        <a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs().start('even');">Show me evens</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start('odd');">Show me odds</a>
+        <a class="btn btn-large btn-info" href="javascript:void(0);" onclick="javascript:introJs.tour().start('even');">Show me evens</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/exit-confirm.html b/example/hello-world/exit-confirm.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
 
     <script type="text/javascript">
       function startTour() {
-        introJs().start().onbeforeexit(function () {
+        introJs.tour().start().onbeforeexit(function () {
           return confirm("Are you sure?");
         });
       }

diff --git a/example/hello-world/index.html b/example/hello-world/index.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!" data-title="A short title">Basic Usage</h1>
         <p class="lead" data-step="4" data-intro="Another step." data-title="foo">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/positions.html b/example/hello-world/positions.html
@@ -48,7 +48,7 @@ <h3 class="muted" style="margin: 0;">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!" style="position: relative;">Different element positions</h1>
         <p class="lead" data-step="4" data-intro="Another step.">In this example you see that Intro.js works with all types of <code>position</code>.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/withProgress.html b/example/hello-world/withProgress.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Progress-bar</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showProgress', true).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showProgress', true).start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/withScroll.html b/example/hello-world/withScroll.html
@@ -45,7 +45,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="3" data-intro="This is a tooltip!">Works with a Scrollable Element</h1>
         <p class="lead">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/withoutBullets.html b/example/hello-world/withoutBullets.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Without Bullets</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showBullets', false).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showBullets', false).start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/hello-world/withoutButtons.html b/example/hello-world/withoutButtons.html
@@ -35,7 +35,7 @@ <h3 class="muted">Intro.js</h3>
       <div class="jumbotron">
         <h1 data-step="1" data-intro="This is a tooltip!">Without Buttons</h1>
         <p class="lead" data-step="4" data-intro="Another step.">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
-        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().setOption('showButtons', false).start();">Show me how</a>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs.tour().setOption('showButtons', false).start();">Show me how</a>
       </div>
 
       <hr>

diff --git a/example/multi-page/index.html b/example/multi-page/index.html
@@ -64,7 +64,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       document.getElementById('startButton').onclick = function() {
-        introJs().setOption('doneLabel', 'Next page').oncomplete(function() {
+        introJs.tour().setOption('doneLabel', 'Next page').oncomplete(function() {
           window.location.href = 'multi-page/second.html?multipage=true';
         }).start();
       };

diff --git a/example/multi-page/second.html b/example/multi-page/second.html
@@ -68,7 +68,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       if (RegExp('multipage', 'gi').test(window.location.search)) {
-        introJs().start();
+        introJs.tour().start();
       }
     </script>
   </body>

diff --git a/example/programmatic/index.html b/example/programmatic/index.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
           intro.setOptions({
             steps: [
               {

diff --git a/example/svg/d3.htm b/example/svg/d3.htm
@@ -47,7 +47,7 @@ <h1 data-intro="This is a tooltip!">SVG</h1>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       document.getElementById('startButton').onclick = function() {
-        introJs().start();
+        introJs.tour().start();
       };
     </script>
   </body>

diff --git a/example/withoutElement/index.html b/example/withoutElement/index.html
@@ -71,7 +71,7 @@ <h4>Section Six</h4>
     <script type="text/javascript" src="../../dist/intro.js"></script>
     <script type="text/javascript">
       function startIntro(){
-        var intro = introJs();
+        var intro = introJs.tour();
           intro.setOptions({
             steps: [
               {