2019-15 - Exploration of a chat like design pattern
Prototype 4: With Data.
<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en" dir="ltr">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>[Topic title] - Canada.ca</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="description" content="Web Experience Toolkit (WET) includes reusable components for building and maintaining innovative Web sites that are accessible, usable, and interoperable. These reusable components are open source software and free for use by departments and external Web communities" />
<!--[if gte IE 9 | !IE ]><!-->
<link href="./../GCWeb/assets/favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="./../GCWeb/css/theme.css" />
<!--<![endif]-->
<!--[if lt IE 9]>
<link href="./../GCWeb/assets/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="./../GCWeb/css/ie8-theme.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./../wet-boew/js/ie8-wet-boew.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<![endif]-->
<noscript><link rel="stylesheet" href="./../wet-boew/css/noscript.css" /></noscript>
<!-- Google Tag Manager DO NOT REMOVE OR MODIFY - NE PAS SUPPRIMER OU MODIFIER -->
<script>dataLayer1 = [];</script>
<!-- End Google Tag Manager -->
<!-- Chatbot -->
<style>
@-webkit-keyframes grow {
0% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
38% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
40% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
88% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
100% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
}
@keyframes slideInFromRight {
0% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
38% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
40% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
88% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
90% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
100% {
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
}
@-webkit-keyframes grow {
0% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
15% {
-ms-transform: scale(1.15, 1.15);
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}
30% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
65% {
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes pulseIn {
0% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
15% {
-ms-transform: scale(1.15, 1.15);
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}
30% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
65% {
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
100% {
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.chtbt-trans-left {
will-change: scroll-position;
animation: 15s ease-out 0s 1 slideInFromRight;
transform-origin: 100% 50%;
}
.chtbt-trans-pulse {
will-change: transform;
animation: 0.5s linear 4s 1 pulseIn, 0.5s linear 11s 1 pulseIn, 0.5s linear 30s 1 pulseIn;
}
.chtbt-bubble-wrap {
width: 60px;
height: 60px;
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1049;
}
.chtbt-bubble-wrap p {
position: relative;
top: 5px;
right: 190px;
width: 220px;
font-size: 0.9em;
background: #335075;
color: #fff;
padding: 5px 50px 5px 25px;
line-height: 20px;
height: 50px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.chtbt-bubble {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
background: #fff url('bot/assets/bot-default-avatar.png') center no-repeat;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
text-indent: -9999px;
overflow: hidden;
white-space: nowrap;
}
.chtbt-container {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1050;
background-color: #fff;
width: 25%;
overflow: hidden;
font-size: 0.9em;
}
@media screen and (max-width: 1199px) {
.chtbt-container {
width: 35%;
}
}
@media screen and (max-width: 992px) {
.chtbt-container {
width: 45%;
}
}
@media screen and (max-width: 768px) {
.chtbt-container {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
bottom: 0;
right: 0;
}
.chtbt-conversation {
max-height: 350px;
}
.chtbt-noscroll {
overflow: hidden !important;
}
}
.chtbt-min {
overflow: visible;
color: #fff;
background: transparent;
border: 0;
-webkit-appearance: none;
font-weight: 700;
width: 44px;
height: 44px;
line-height: 50px;
text-decoration: none;
opacity: 0.65;
filter: alpha(opacity=65);
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
font-size: 1.1em;
}
.chtbt-min:focus {
outline: 1px dotted #fff;
outline-offset: -2px;
opacity: 1;
}
.chtbt-conversation {
overflow-y: auto;
overflow-x: hidden;
max-height: 500px;
min-height: 200px;
}
.chtbt-history {
padding-top: 15px;
}
.chtbt-history::before {
content: "";
width: 100%;
height: 40px;
pointer-events: none;
background: linear-gradient(to bottom,#fff 20%, rgba(255,255,255,0) 100%);
position: absolute;
top: 0;
left: 0;
z-index: 1051;
}
.chtbt-inputs fieldset:first-child {
border-top: 1px solid #e5e5e5;
}
.chtbt-inputs ul:last-child {
margin-bottom: 0;
}
.chtbt-container h4, .chtbt-container legend {
font-size: 1em;
}
.chtbt-question, .chtbt-message, .chtbt-container label {
padding: 8px 12px;
border-radius: 15px;
color: #595a5a;
width: auto;
font-weight: normal;
}
.chtbt-question {
background-color: #ececec;
min-width: 60px;
position: relative;
}
.chtbt-message, .chtbt-container label {
background-color: #dfdfdf;
}
.chtbt-message {
margin-right: 15px;
}
.chtbt-container label {
border: 1px solid #aaa;
font-weight: bold;
}
.chtbt-avatar, .chtbt-question {
display: table-cell;
vertical-align: middle;
}
.chtbt-avatar {
width: 30px;
height: 30px;
background-color: #fff;
background-image: url('bot/assets/bot-default-avatar.png');
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
}
.chtbt-basic-link {
min-height: inherit;
}
@-webkit-keyframes grow {
to {
-webkit-transform: translateX(-50%) scale(0);
transform: translateX(-50%) scale(0);
}
}
@keyframes grow {
to {
-webkit-transform: translateX(-50%) scale(0);
transform: translateX(-50%) scale(0);
}
}
.chtbt-loader {
width: 26px;
height: 6px;
position: absolute;
top: 50%;
left: 30px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.chtbt-loader-dot {
will-change: transform;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: #444;
position: absolute;
-webkit-animation: grow 0.5s ease-in-out infinite alternate;
animation: grow 0.5s ease-in-out infinite alternate;
}
.chtbt-loader-dot.dot1 {
left: 0;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.chtbt-loader-dot.dot2 {
left: 50%;
-webkit-transform: translateX(-50%) scale(1);
transform: translateX(-50%) scale(1);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.chtbt-loader-dot.dot3 {
right: 0;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
</style>
</head>
<body class="secondary" vocab="http://schema.org/" typeof="WebPage">
<!-- Google Tag Manager DO NOT REMOVE OR MODIFY - NE PAS SUPPRIMER OU MODIFIER -->
<noscript><iframe title="Google Tag Manager" src="//www.googletagmanager.com/ns.html?id=GTM-TLGQ9K" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer1'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer1','GTM-TLGQ9K');</script>
<!-- End Google Tag Manager -->
<ul id="wb-tphp">
<li class="wb-slc">
<a class="wb-sl" href="#wb-cont">Skip to main content</a>
</li>
<li class="wb-slc">
<a class="wb-sl" href="#wb-info">Skip to "About government"</a>
</li>
</ul><header role="banner">
<div id="wb-bnr" class="container">
<section id="wb-lng" class="visible-md visible-lg text-right">
<h2 class="wb-inv">Language selection</h2>
<div class="row">
<div class="col-md-12">
<ul class="list-inline margin-bottom-none">
<li><a lang="fr" href="topic-fr.html">Français</a></li>
</ul>
</div>
</div>
</section>
<div class="row">
<div class="brand col-xs-8 col-sm-9 col-md-6">
<a href="https://www.canada.ca/en.html"><img src="./../GCWeb/assets/sig-blk-en.svg" alt="" /><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
</div>
<section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" id="wb-glb-mn">
<h2>Search and menus</h2>
<ul class="list-inline text-right chvrn">
<li><a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk" role="button"><span class="glyphicon glyphicon-search"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Search and menus</span></span></span></a></li>
</ul>
<div id="mb-pnl"></div>
</section>
<section id="wb-srch" class="col-xs-6 text-right visible-md visible-lg">
<h2>Search</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Search website</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="27" maxlength="150" placeholder="Search Canada.ca" />
<datalist id="wb-srch-q-ac">
<!--[if lte IE 9]><select><![endif]-->
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
</div>
</form>
</section>
</div>
</div>
<nav role="navigation" id="wb-sm" data-ajax-replace="./ajax/sitemenu-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
<div class="container nvbar">
<h2>Topics menu</h2>
<div class="row">
<ul class="list-inline menu">
<li><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></li>
<li><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration</a></li>
<li><a href="https://travel.gc.ca/">Travel</a></li>
<li><a href="https://www.canada.ca/en/services/business.html">Business</a></li>
<li><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
<li><a href="https://www.canada.ca/en/services/health.html">Health</a></li>
<li><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
<li><a href="https://www.canada.ca/en/services.html">More services</a></li>
</ul>
</div>
</div>
</nav>
<nav role="navigation" id="wb-bc" property="breadcrumb">
<h2>You are here:</h2>
<div class="container">
<div class="row">
<ol class="breadcrumb">
<li><a href="https://www.canada.ca/en.html">Home</a></li><li><a href="theme-en.html">[Theme Name]</a></li>
</ol>
</div>
</div>
</nav>
</header>
<main role="main" property="mainContentOfPage" class="container">
<div class="row profile">
<div class="col-md-6">
<h1 property="name" id="wb-cont">[Topic title]</h1>
<p>1-2 sentences that describe the topics and top tasks that can be accessed on this page.</p>
<section class="followus">
<h2>Follow:</h2>
<ul>
<li><a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook</span></a></li>
<li><a href="#" class="twitter" rel="external"><span class="wb-inv">Twitter</span></a></li>
<li><a href="#youtube" class="youtube wb-lbx"><span class="wb-inv">YouTube</span></a></li>
<li><a href="#" class="flickr" rel="external"><span class="wb-inv">Flickr</span></a></li>
<li><a href="#" class="googleplus" rel="external"><span class="wb-inv">Google+</span></a></li>
<li><a href="#" class="pinterest" rel="external"><span class="wb-inv">Pinterest</span></a></li>
<li><a href="#" class="linkedin" rel="external"><span class="wb-inv">LinkedIn</span></a></li>
<li><a href="#" class="instagram" rel="external"><span class="wb-inv">Instagram</span></a></li>
<li><a href="#" class="rss" rel="external"><span class="wb-inv">RSS Feed</span></a></li>
<li><a href="#" class="email" rel="external"><span class="wb-inv">Email subscription</span></a></li>
<li><a href="#" class="periscope" rel="external"><span class="wb-inv">Periscope</span></a></li>
</ul>
</section>
<section id="facebook" class="mfp-hide modal-dialog modal-content overlay-def">
<header class="modal-header">
<h2 class="modal-title">Facebook</h2>
</header>
<div class="modal-body">
<ul class="list-unstyled lst-spcd">
<li><a href="#" rel="external">[First Facebook account title]</a></li>
<li><a href="#" rel="external">[Second Facebook account title]</a></li>
</ul>
</div>
</section>
<section id="youtube" class="mfp-hide modal-dialog modal-content overlay-def">
<header class="modal-header">
<h2 class="modal-title">YouTube</h2>
</header>
<div class="modal-body">
<ul class="list-unstyled lst-spcd">
<li><a href="#" rel="external">[First YouTube account title]</a></li>
<li><a href="#" rel="external">[Second YouTube account title]</a></li>
<li><a href="#" rel="external">[Third YouTube account title]</a></li>
</ul>
</div>
</section>
</div>
<div class="col-md-6 mrgn-tp-sm hidden-sm hidden-xs">
<img src="./img/520x200.png" alt="" class="pull-right img-responsive thumbnail"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12 pull-right">
<section class="lnkbx">
<h2>
Most requested
</h2>
<ul>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
<li><a href="#"> [Top task hyperlink text]
</a></li>
</ul>
</section> </div>
<div class="container wb-chtbt chtbt-basic">
<div class="row">
<section class="col-md-12">
<h2>Help us help you</h2>
<form class="mrgn-bttm-xl" data-wb-chtbt='{"action":"search", "send":"Show results"}'>
<fieldset>
<legend id="q1" data-wb-chtbt-q="Are you:">What would you describe yourself as?</legend>
<ul class="list-unstyled mrgn-tp-md">
<li>
<label data-wb-chtbt-a='{"next":"#q2","url":"page1.html"}'>
<input type="radio" value="young-canadian" name="q1" />
a young Canadian
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page2.html"}'>
<input type="radio" value="employer-organization-funding-support-youth" name="q1" />
an employer or organization looking for funding to support youth
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend id="q2" data-wb-chtbt-q="Great! And are you:">In what situation are you?</legend>
<ul class="list-unstyled mrgn-tp-md">
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="high-school" name="q2" />
a high school student
</label>
</li>
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="cegep-student" name="q2" />
a CÉGEP student
</label>
</li>
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="post-secondary" name="q2" />
a post-secondary school student
</label>
</li>
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="ready-start-career" name="q2" />
ready to start a career
</label>
</li>
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="not-school-not-working" name="q2" />
not in school and not working
</label>
</li>
<li>
<label data-wb-chtbt-a='{"next":"#q3","url":"page1.html"}'>
<input type="radio" value="none" name="q2" />
none of these
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend data-wb-chtbt-q="Awesome! And would you like to:">What is your goal?</legend>
<ul class="list-unstyled mrgn-tp-md">
<li>
<label data-wb-chtbt-a='{"url":"page3.html"}'>
<input type="radio" value="get-job" name="q3" />
get a job
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page4.html"}'>
<input type="radio" value="develop-skills" name="q3" />
develop skills
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page5.html"}'>
<input type="radio" value="explore-careers" name="q3" />
explore careers
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page6.html"}'>
<input type="radio" value="post-secondary-education" name="q3" />
attend post-secondary education
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page7.html"}'>
<input type="radio" value="serve-community" name="q3" />
serve your community
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page8.html"}'>
<input type="radio" value="get-experience" name="q3" />
get an experience
</label>
</li>
<li>
<label data-wb-chtbt-a='{"url":"page1.html"}'>
<input type="radio" value="everything" name="q3" />
see everything
</label>
</li>
</ul>
</fieldset>
<button type="submit" class="btn btn-sm btn-default chtbt-link">Switch to help wizard</button>
<button type="submit" class="btn btn-sm btn-primary" data-chtbt-end="Thank you. I have built a built a page with results you may find resourceful.">Search</button>
</form>
</section>
</div>
</div>
<section class="col-md-8 pull-left">
<h2>Services and information</h2>
<div class="wb-eqht row">
<div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> <div class="col-md-6">
<section>
<h3 class="h5"><a href="#">
[Subtopic hyperlink text]
</a></h3>
<p>
Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.
</p>
</section>
</div> </div>
</section>
<div class="pull-right col-xs-12 col-md-4">
<section class="lnkbx">
<h2>
Contributors
</h2>
<ul>
<li><a href="#">[Institution name]</a></li>
<li><a href="#">[Institution name]</a></li>
<li><a href="#">[Institution name]</a></li>
</ul>
</section>
<section class="lnkbx">
<h2>More information for</h2>
<ul>
<li><a href="#">[Audience hyperlink text]</a></li>
<li><a href="#">[Audience hyperlink text]</a></li>
<li><a href="#">[Audience hyperlink text]</a></li>
</ul>
</section>
</div>
</div>
<section class="whtwedo">
<h2>What we are doing</h2>
<div class="row wb-eqht">
<section class="col-lg-4 col-md-6">
<h3>Research</h3>
<ul>
<li><a href="#">[Research report 1]</a></li>
<li><a href="#">[Research report 2]</a></li>
<li><a href="#">[Launched research study]</a></li>
<li><a href="#">[Preliminary research result 1]</a></li>
</ul>
<p><a href="#">All related research</a></p>
</section>
<section class="col-lg-4 col-md-6">
<h3>Surveys</h3>
<ul>
<li><a href="#">[Survey 1]</a></li>
<li><a href="#">[Survey 2 with a long heading]</a></li>
<li><a href="#">[Survey 3]</a></li>
<li><a href="#">[Survey 4]</a></li>
</ul>
<p><a href="#">All related surveys</a></p>
</section>
<section class="col-lg-4 col-md-6">
<h3>Consultations</h3>
<ul>
<li><a href="#">[Consultation 1]</a></li>
<li><a href="#">[Consultation 2 with a long heading]</a></li>
<li><a href="#">[Consultation 3]</a></li>
<li><a href="#">[Consultation 4 with a long heading]</a></li>
</ul>
<p><a href="#">All related consultations</a></p>
</section>
</div>
</section>
<section class="gc-prtts">
<h2>Features</h2>
<div class="row">
<div class="col-lg-4 col-md-6 mrgn-bttm-md">
<a href="#">
<figure>
<figcaption>[Feature hyperlink text]</figcaption>
<img src="./img/360x203.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm"/>
<p>Brief description of the feature being promoted.</p>
</figure>
</a>
</div>
<div class="col-lg-4 col-md-6 mrgn-bttm-md">
<a href="#">
<figure>
<figcaption>[Feature hyperlink text]</figcaption>
<img src="./img/360x203.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm"/>
<p>Brief description of the feature being promoted.</p>
</figure>
</a>
</div>
<div class="col-lg-4 col-md-6 mrgn-bttm-md">
<a href="#">
<figure>
<figcaption>[Feature hyperlink text]</figcaption>
<img src="./img/360x203.png" alt="" class="img-responsive thumbnail mrgn-bttm-sm"/>
<p>Brief description of the feature being promoted.</p>
</figure>
</a>
</div>
</div>
</section>
<div class="pagedetails">
<dl id="wb-dtmd">
<dt>Date modified: </dt>
<dd><time property="dateModified">2017-12-05</time></dd>
</dl>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Report a problem on this page</summary>
<div class="well row">
<div class="gc-rprt-prblm">
<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
<form action="#">
<fieldset>
<legend><span class="field-name">Please select all that apply: </span></legend>
<div class="checkbox">
<label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Something is broken" id="problem1" />Something is broken</label>
</div>
<div class="form-group hide" id="broken">
<label for="problem1-detail">Provide more details (optional):</label>
<input type="text" class="form-control full-width" id="problem1-detail">
</div>
<div class="checkbox">
<label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="It has spelling or grammar mistakes" id="problem2" />The page has spelling or grammar mistakes</label>
</div>
<div class="form-group hide" id="spelling">
<label for="problem2-detail">Provide more details (optional):</label>
<input type="text" class="form-control full-width" id="problem2-detail">
</div>
<div class="checkbox">
<label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="The information is wrong" id="problem3" />The information is wrong</label>
</div>
<div class="form-group hide" id="wrong">
<label for="problem3-detail">Provide more details (optional):</label>
<input type="text" class="form-control full-width" id="problem3-detail">
</div>
<div class="checkbox">
<label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="The information is outdated" id="problem4" />The information is outdated</label>
</div>
<div class="form-group hide" id="outdated">
<label for="problem4-detail">Provide more details (optional):</label>
<input type="text" class="form-control full-width" id="problem4-detail">
</div>
<div class="checkbox">
<label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="I can’t find what I’m looking for" id="problem5" />I can’t find what I’m looking for</label>
</div>
<div class="form-group hide" id="find">
<label for="problem5-detail">Describe what you’re looking for (optional):</label>
<input type="text" class="form-control full-width" id="problem5-detail">
</div>
<div class="checkbox">
<label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="It’s confusing" id="problem6" />Other</label>
</div>
<div class="form-group hide" id="confusing">
<label for="problem6-detail">Provide more details (optional):</label>
<input type="text" class="form-control full-width" id="problem6-detail">
</div>
</fieldset>
<button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Submit</button>
</form>
</div>
<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide">
<h3>Thank you for your help!</h3>
<p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
</div>
</div>
</div>
</details>
</div>
<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
</div>
</div>
</main>
<footer role="contentinfo" id="wb-info">
<nav role="navigation" class="container wb-navcurr">
<h2 class="wb-inv">About government</h2>
<ul class="list-unstyled colcount-sm-2 colcount-md-3">
<li><a href="https://www.canada.ca/en/contact.html">Contact us</a></li>
<li><a href="https://www.canada.ca/en/government/dept.html">Departments and agencies</a></li>
<li><a href="https://www.canada.ca/en/government/publicservice.html">Public service and military</a></li>
<li><a href="https://www.canada.ca/en/news.html">News</a></li>
<li><a href="https://www.canada.ca/en/government/system/laws.html">Treaties, laws and regulations</a></li>
<li><a href="https://www.canada.ca/en/transparency/reporting.html">Government-wide reporting</a></li>
<li><a href="https://pm.gc.ca/eng">Prime Minister</a></li>
<li><a href="https://www.canada.ca/en/government/system.html">How government works</a></li>
<li><a href="https://open.canada.ca/en/">Open government</a></li>
</ul> </nav>
<div class="brand">
<div class="container">
<div class="row ">
<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
<h2 class="wb-inv">About this site</h2>
<ul>
<li><a href="https://www.canada.ca/en/social.html">Social media</a></li>
<li><a href="https://www.canada.ca/en/mobile.html">Mobile applications</a></li>
<li><a href="https://www1.canada.ca/en/newsite.html">About Canada.ca</a></li>
<li><a href="https://www.canada.ca/en/transparency/terms.html">Terms and conditions</a></li>
<li><a href="https://www.canada.ca/en/transparency/privacy.html">Privacy</a></li>
</ul>
</nav>
<div class="col-xs-6 visible-sm visible-xs tofpg">
<a href="#wb-cont">Top of Page <span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
<div class="col-xs-6 col-md-3 col-lg-2 text-right">
<img src="./../GCWeb/assets/wmms-blk.svg" alt="Symbol of the Government of Canada" />
</div>
</div>
</div>
</div>
</footer>
<!--[if gte IE 9 | !IE ]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="./../wet-boew/js/wet-boew.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="./../wet-boew/js/ie8-wet-boew2.js"></script>
<![endif]-->
<script src="./../GCWeb/js/theme.js"></script>
<!-- Chat bot -->
<script>
// Data structure for a working chatbot
var datainput = [
{
header: {
action: "search",
send: "Show results",
endtext: "Thank you. I have built a built a page with results you may find resourceful."
},
questions: [
{
question: "q1",
labelform: "What would you describe yourself as?",
labelwizard: "Are you:",
input: "radio",
choices: [
{
content: "a young Canadian",
value: "young-canadian",
next: "#q2",
url: "page1.html"
},
{
content: "an employer or organization looking for funding to support youth",
value: "employer-organization-funding-support-youth",
next: false,
url: "page2.html"
}
]
},
{
question: "q2",
labelform: "In what situation are you?",
labelwizard: "Great! And are you:",
input: "radio",
choices: [
{
content: "a high school student",
value: "high-school",
next: "#q3",
url: "page1.html"
},
{
content: "a CÉGEP student",
value: "cegep-student",
next: "#q3",
url: "page2.html"
},
{
content: "a post-secondary school student",
value: "post-secondary",
next: "#q3",
url: "page1.html"
},
{
content: "ready to start a career",
value: "ready-start-career",
next: "#q3",
url: "page2.html"
},
{
content: "not in school and not working",
value: "not-school-not-working",
next: "#q3",
url: "page1.html"
},
{
content: "none of these",
value: "none",
next: "#q3",
url: "page2.html"
}
]
},
{
question: "q3",
labelform: "What is your goal?",
labelwizard: "Awesome! And would you like to:",
input: "radio",
choices: [
{
content: "get a job",
value: "get-job",
next: false,
url: "page1.html"
},
{
content: "develop skills",
value: "develop-skills",
next: false,
url: "page2.html"
},
{
content: "explore careers",
value: "explore-careers",
next: false,
url: "page3.html"
},
{
content: "attend post-secondary education",
value: "post-secondary-education",
next: false,
url: "page4.html"
},
{
content: "serve your community",
value: "serve-community",
next: false,
url: "page5.html"
},
{
content: "get an experience",
value: "get-experience",
next: false,
url: "page6.html"
},
{
content: "see everything",
value: "everything",
next: false,
url: "page7.html"
}
]
}
]
}
];
// Now the JSON version of it
var datajson = "[{\"header\":{\"action\":\"search\",\"send\":\"Show results\",\"endtext\":\"Thank you. I have built a built a page with results you may find resourceful.\"},\"questions\":[{\"question\":\"q1\",\"labelform\":\"What would you describe yourself as?\",\"labelwizard\":\"Are you:\",\"input\":\"radio\",\"choices\":[{\"content\":\"a young Canadian\",\"value\":\"young-canadian\",\"next\":\"#q2\",\"url\":\"page1.html\"},{\"content\":\"an employer or organization looking for funding to support youth\",\"value\":\"employer-organization-funding-support-youth\",\"next\":false,\"url\":\"page2.html\"}]},{\"question\":\"q2\",\"labelform\":\"In what situation are you?\",\"labelwizard\":\"Great! And are you:\",\"input\":\"radio\",\"choices\":[{\"content\":\"a high school student\",\"value\":\"high-school\",\"next\":\"#q3\",\"url\":\"page1.html\"},{\"content\":\"a CÉGEP student\",\"value\":\"cegep-student\",\"next\":\"#q3\",\"url\":\"page2.html\"},{\"content\":\"a post-secondary school student\",\"value\":\"post-secondary\",\"next\":\"#q3\",\"url\":\"page1.html\"},{\"content\":\"ready to start a career\",\"value\":\"ready-start-career\",\"next\":\"#q3\",\"url\":\"page2.html\"},{\"content\":\"not in school and not working\",\"value\":\"not-school-not-working\",\"next\":\"#q3\",\"url\":\"page1.html\"},{\"content\":\"none of these\",\"value\":\"none\",\"next\":\"#q3\",\"url\":\"page2.html\"}]},{\"question\":\"q3\",\"labelform\":\"What is your goal?\",\"labelwizard\":\"Awesome! And would you like to:\",\"input\":\"radio\",\"choices\":[{\"content\":\"get a job\",\"value\":\"get-job\",\"next\":false,\"url\":\"page1.html\"},{\"content\":\"develop skills\",\"value\":\"develop-skills\",\"next\":false,\"url\":\"page2.html\"},{\"content\":\"explore careers\",\"value\":\"explore-careers\",\"next\":false,\"url\":\"page3.html\"},{\"content\":\"attend post-secondary education\",\"value\":\"post-secondary-education\",\"next\":false,\"url\":\"page4.html\"},{\"content\":\"serve your community\",\"value\":\"serve-community\",\"next\":false,\"url\":\"page5.html\"},{\"content\":\"get an experience\",\"value\":\"get-experience\",\"next\":false,\"url\":\"page6.html\"},{\"content\":\"see everything\",\"value\":\"everything\",\"next\":false,\"url\":\"page7.html\"}]}]}]";
// For testing purposes, overwrite the datainput by the parsed JSON
datainput = JSON.parse(datajson);
// Create the data that is sent as an output, if needed
dataoutput =
// If chatbot is found, initiate
function initiateChtbt($selector, $input="JSON") {
buildChtbt($selector);
var $basic = $(".chtbt-basic"),
$bubble = $(".chtbt-bubble-wrap"),
$container = $(".chtbt-container"),
$form = $(".chtbt-body"),
hasAnswered = true,
qIndex = 0;
$basic.hide();
$bubble.fadeIn('slow');
setTimeout(function () {
$bubble.find('p').hide();
}, 14850);
// Show basic form and hide chatbot
$(".chtbt-basic-link").on("click", function(event) {
event.preventDefault();
$container.stop().hide();
$basic.stop().show();
$basic.find("input:first").focus();
$("body").removeClass("chtbt-noscroll");
});
// Show chatbot and hide basic form
$(".chtbt-link").on("click", function(event) {
event.preventDefault();
$basic.stop().hide();
$bubble.find(".chtbt-bubble").removeClass("chtbt-trans-pulse");
$bubble.find("p").hide().removeClass("chtbt-trans-left");
$container.stop().show();
$bubble.stop().hide();
$(".chtbt-conversation").scrollTop($('.chtbt-history')[0].scrollHeight);
$("body").addClass("chtbt-noscroll");
if(hasAnswered) {
appendInteraction($form, datainput[0].questions[qIndex].labelwizard);
qIndex++;
}
});
// On Submit answer
$form.on("submit", function(event) {
event.preventDefault();
appendReply($form, $("input:checked").val());
})
// Minimize chatbot
$(".chtbt-min").on("click", function(event) {
event.preventDefault();
$container.stop().hide();
$bubble.stop().show();
$("body").removeClass("chtbt-noscroll");
});
}
// Builds the chatbot skeleton
function buildChtbt($selector) {
$selector.after('<div class="chtbt-bubble-wrap"><p class="chtbt-trans-left">I can help you find the information you need</p><a href="#chtbt-container" aria-controls="chtbt-container" class="chtbt-link chtbt-bubble chtbt-trans-pulse" role="button">Toggle help wizard</a></div>');
$selector.next('.chtbt-bubble-wrap').after('<aside class="modal-content overlay-def chtbt-container"></a>');
$container = $(".chtbt-container");
$container.append('<header class="modal-header chtbt-header"><h2 class="modal-title chtbt-title">I can help you find the information you need</h2><button type="button" class="chtbt-min" title="Minimize help wizard"><span class="glyphicon glyphicon-chevron-down"></span></button></header>');
$container.append('<form class="modal-body chtbt-body"></form>');
$form = $(".chtbt-body");
$form.append('<div class="chtbt-conversation mrgn-bttm-md"><section class="chtbt-history"><h3 class="wb-inv">Conversation history</h3></section><section class="chtbt-reply"><h3 class="wb-inv">Reply</h3><div class="chtbt-inputs"></div></section></div>');
$form.append('<section class="chtbt-controls"><h3 class="wb-inv">Controls</h3><div class="row"><div class="col-xs-12"><button type="submit" class="btn btn-primary btn-block" type="button">Send</button></div></div><div class="row"><div class="col-xs-12 text-center mrgn-tp-sm"><a href="#chtbt-basic" class="btn btn-sm btn-link chtbt-basic-link" role="button">Switch to basic form</a></div></div></section>');
$(".chtbt-conversation").scrollTop($('.chtbt-history')[0].scrollHeight);
}
// Adds new question from bot and inputs
function appendInteraction($selector, content, interactions) {
$dropspot = $selector.find(".chtbt-history");
$dropspot.append('<div class="row mrgn-bttm-sm"><div class="col-xs-9"><h4 class="mrgn-tp-0 mrgn-bttm-sm"><span class="chtbt-avatar"></span><span class="chtbt-question"><span class="chtbt-loader"><span class="chtbt-loader-dot dot1"></span><span class="chtbt-loader-dot dot2"></span><span class="chtbt-loader-dot dot3"></span></span></span></h4></div></div>');
setTimeout(function () {
$dropspot.find(".chtbt-question:last-child").html(content);
setTimeout(function () {
$selector.find(".chtbt-inputs").append('<fieldset><legend class="wb-inv">Are you:</legend><div class="row"><div class="col-xs-12"><ul class="list-inline mrgn-tp-sm"><li><label><input type="radio" value="young" name="q2" /> a young Canadian</label></li><li><label><input type="radio" value="emloyer" name="q2" /> an employer or organization looking for funding to support youth</label></li></ul></div></div></fieldset>');
if($(".chtbt-reply").outerHeight() > ($(".chtbt-conversation").innerHeight() - $(".chtbt-question:last")[0].scrollHeight)) {
$(".chtbt-conversation").stop().animate({scrollTop:$(".chtbt-history").outerHeight() - $(".chtbt-question:last")[0].scrollHeight - 30}, 500, 'swing');
} else {
$(".chtbt-conversation").scrollTop($(".chtbt-history")[0].scrollHeight);
}
}, 1500);
$(".chtbt-conversation").scrollTop($(".chtbt-history")[0].scrollHeight);
}, 3000);
}
// Adds raply from human
function appendReply($selector, content) {
$dropspot = $selector.find(".chtbt-history");
$dropspot.append('<div class="row mrgn-bttm-md"><div class="col-xs-9 col-xs-offset-3"><div class="chtbt-message text-right pull-right"><p class="mrgn-bttm-0">' + content + '</p></div></div></div>');
}
if($(".wb-chtbt").length) {
$chtbt = $(".wb-chtbt");
initiateChtbt($chtbt);
}
</script>
</body>
</html>