intro.js
Version:
Better introductions for websites and features with a step-by-step guide for your projects
138 lines (130 loc) • 6.63 kB
HTML
<html lang="en">
<head>
<!-- Intro.js by Afshin Mehrabani (@afshinmeh) in usabli.ca group -->
<meta charset="utf-8">
<title>Pricing Elasticity Analysis: How does a price change impact my bottom line?</title>
<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
<meta name="description" content='This Starter Kit will guide you through how you can use the A/B testing tools within Alteryx to answer "How does a price change impact my bottom line?" and similar questions.'>
<meta name="author" content="Content Engineering - Stephen Wagner">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../../introjs.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="./resources/step.css" rel="stylesheet">
</head>
<body style="text-align: center;padding-top: 50px;">
<div id="overview" style="display:block;margin-right: auto;margin-left: auto;">
</br>
<img src="img/AB_Controls_Title.png" style="height:auto;width:100%;">
<p>An important step in running an A/B test is to match control and treatment units properly.<br>Matching units properly will allow you to control for differences between units and compare "apples to apples" as best as possible.<br>This guided workflow will demonstrate how to match control and treatment stores to use when analyzing which facial price performed the best.</p>
<button type="submit" onclick="startIntro();">Start Guided Workflow</button></br>
<p style="margin-top:5px;font-size:12px;">Use keyboard arrow keys to progress through walkthrough. Press Esc to end walkthrough.</p>
<p style="margin-top:8px;font-size:10px;"><i>For best viewing experience, please move the Results view underneath the Configuration view</i></p>
</div>
<div id="walkthrough" style="display:none;">
<div id="header" class="section group">
<img src="img/AB_Controls_Title.png" style="height:48px;width:1020px;">
</div>
<div id="workflow" class="section group" style="text-align:center;display:block;">
<div id="col1" class="col span_1_of_9">
<div id="tool1" class="section group">
<img class="tool" src="img/tools/tool1.png" onclick="step('7');">
</div>
<div id="tool10" class="section group">
<img class="tool" src="img/tools/tool10.png" onclick="step('13');">
</div>
<div class="section group">
</div>
</div>
<div id="col2" class="col span_1_of_9">
<div id="tool2" class="section group">
<img class="tool" src="img/tools/tool2.png" onclick="step('9');">
</div>
<div class="section group">
<img class="tool" src="img/tools/line.png">
</div>
<div class="section group">
</div>
</div>
<div id="col3" class="col span_1_of_9">
<div id="tool3" class="section group">
<img class="tool" src="img/tools/tool3.png" onclick="step('15');">
</div>
<div class="section group">
<img class="tool" src="img/tools/line2.png">
</div>
<div class="section group">
<img src="img/tools/line4.png">
</div>
</div>
<div id="col4" class="col span_1_of_9">
<div id="tool4" class="section group">
<img class="tool" src="img/tools/tool4.png" onclick="step('18');">
</div>
<div id="tool11" class="section group">
<img class="tool" src="img/tools/tool11.png" onclick="step('20');">
</div>
<div id="tool14" class="section group">
<img class="tool" src="img/tools/tool14.png" onclick="step('22');">
</div>
</div>
<div id="col5" class="col span_1_of_9">
<div id="tool5" class="section group">
<img class="tool" src="img/tools/tool5.png" onclick="step('24');">
</div>
<div id="tool12" class="section group">
<img class="tool" src="img/tools/tool12.png" onclick="step('24');">
</div>
<div id="tool15" class="section group">
<img class="tool" src="img/tools/tool15.png" onclick="step('24');">
</div>
</div>
<div id="col6" class="col span_1_of_9">
<div id="tool6" class="section group">
<img class="tool" src="img/tools/tool6.png" onclick="step('26');">
</div>
<div id="tool13" class="section group">
<img class="tool" src="img/tools/tool13.png" onclick="step('26');">
</div>
<div id="tool16" class="section group">
<img class="tool" src="img/tools/tool16.png" onclick="step('26');">
</div>
</div>
<div id="col7" class="col span_1_of_9">
<div id="tool7" class="section group">
<img class="tool" src="img/tools/tool7.png" onclick="step('30');">
</div>
<div class="section group">
<img src="img/tools/line3.png">
</div>
<div class="section group">
<img src="img/tools/line5.png">
</div>
</div>
<div id="col8" class="col span_1_of_9">
<div id="tool8" class="section group">
<img class="tool" src="img/tools/tool8.png" onclick="step('32');">
</div>
<div class="section group">
</div>
<div class="section group">
</div>
</div>
<div id="col9" class="col span_1_of_9">
<div id="tool9" class="section group">
<img class="tool" src="img/tools/tool9.png" onclick="step('34');">
</div>
<div class="section group">
</div>
<div class="section group">
</div>
</div>
</div>
<div id="footer" style="background-color:rgb(214,214,214);float:center;text-align:center;vertical-align:center;font-size:13px;">
<p><i>Navigation Tips: Use keyboard arrow keys to progress through walkthrough. Press Esc to end walkthrough. Click on a tool to begin walkthrough at that step.</i></p>
</div>
</div>
<script type="text/javascript" src="../../intro.js"></script>
<script type="text/javascript" src="./resources/step.js"></script>
</body>
</html>