<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/JackEdwardLyons/pen/oLyzOq?depth=everything&order=popularity&page=81&q=develop&show_forks=false" />
<style class="cp-pen-styles">html {
font-family: sans-serif;
}
/*
* Remove default margin.
*/
body,p {
margin: 0;
}
/*
* New HTML5 elements 'may' require explicit display stating
*/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
display: block;
}
/*
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/*
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,a:hover,a:visited,a:link {
color: #fff;
text-decoration: none;
outline: 0;
}
body {
background: #fff;
color: #fff;
}
.container {
margin: 0 auto;
text-align: center;
max-width: 1400px;
}
/*
* WRAPPER SECTION PROGRESS BAR
*/
header {
color: #666;
margin: 20px 0 5px 5px;
}
header h1 {
font-size: 30px;
}
.section-1,.section-2,.section-3,.section-4 {
background-color: #5fb82c;
border: 3px solid #fff;
border-radius: 10px;
box-shadow: 0 -1px 20px 4px rgba(141,141,141,0.4);
display: inline-block;
height: 100%;
margin: 2px;
padding: 10px;
width: 20%;
}
.section-1:hover,
.section-2:hover,
.section-3:hover,
.section-4:hover {
cursor: pointer;
background-color: #228B22;
-webkit-transition: .3s ease;
transition: .3s ease;
}
/*
* WRAPPER FOR ALL CIRCLE ELEMENTS
*/
.cogWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-top: 50px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-wrap: inherit;
flex-wrap: inherit;
position: relative;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-weight: 400;
}
.text {
margin: 5px;
}
.text h3 {
font-size: 1em;
font-weight: 700;
}
img {
border: 0;
}
/*
* PIE STYLES --> Be careful when editing these elements.
*/
.text p {
margin-bottom: 5px;
}
ul {
margin: 0;
padding: 0;
}
.section-result img {
padding: 5px;
}
.pie {
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 -1px 20px 4px rgba(141,141,141,0.4);
font: 14px Arial,sans-serif;
margin: 15px auto;
list-style: none;
overflow: hidden;
padding: 0;
position: relative;
height: 400px;
width: 400px;
}
/* PIE COLORS & COG IMG POSITION */
.pie.orange {
background: #ffa626;
margin: 46.5px;
}
.pie.orange .slice:hover {
background: #e67300;
}
.pie.purple {
background: #9238c4;
margin: 46.5px;
}
.pie.purple .slice:hover {
background: #832cb3;
}
.pie.blue {
background: #3FB0CE;
margin: 46.5px;
}
.pie.blue .slice:hover {
background: #289EB9;
}
.slice {
border: 1px solid #fff;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
height: 50%;
width: 50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transition: background-color .3s ease;
transition: background-color .3s ease;
}
.slice:hover {
cursor: pointer;
}
.slice-contents {
position: absolute;
top: 10%;
left: -100%;
width: 200%;
height: 200%;
border-radius: 50%;
text-align: center;
-webkit-transition: background-color .5s;
transition: background-color .5s;
}
/* ORANGE CIRCLE STYLES
* Please note: the segment numbers are not the same as the section numbers on display
* Use inspect element to double check which section you are on & would like to edit.
*/
.orange-wrapper {
margin-top: 2.5%;
position: relative;
left: -18px;
}
/* Background image */
#orangeCog {
height: 510px;
width: 510px;
position: absolute;
right: -8px;
top: -7px;
}
.orange .segment-1 {
-webkit-transform: rotate(360deg) skewY(-45deg);
transform: rotate(360deg) skewY(-45deg);
}
.orange .segment-1 .slice-contents {
text-align: left;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: -54%;
top: 26%;
width: 110px;
}
.orange .segment-1 .text {
-webkit-transform: rotate(-45deg) skewY(45deg);
transform: rotate(-45deg) skewY(45deg);
}
.orange .segment-2 {
-webkit-transform: rotate(90deg) skewY(-45deg);
transform: rotate(90deg) skewY(-45deg);
}
.orange .segment-2 .slice-contents {
text-align: right;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -60%;
top: -38%;
width: 100px;
}
.orange .segment-2 .text {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.orange .segment-3 {
-webkit-transform: rotate(135deg) skewY(-45deg);
transform: rotate(135deg) skewY(-45deg);
}
.orange .segment-3 .slice-contents {
text-align: left;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -63%;
top: -45%;
width: 100px;
}
.orange .segment-3 .text {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.orange .segment-4 {
-webkit-transform: rotate(180deg) skewY(-45deg);
transform: rotate(180deg) skewY(-45deg);
}
.orange .segment-4 .slice-contents {
text-align: right;
-webkit-transform: skewY(45deg) rotate(90deg);
transform: skewY(45deg) rotate(90deg);
left: -75%;
top: -112%;
width: 100px;
}
.orange .segment-4 .text {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.orange .segment-5 {
-webkit-transform: rotate(225deg) skewY(-45deg);
transform: rotate(225deg) skewY(-45deg);
}
.orange .segment-5 .slice-contents {
text-align: left;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -70%;
top: -30%;
width: 120px;
}
.orange .segment-5 .text {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.orange .segment-6 {
-webkit-transform: rotate(270deg) skewY(-45deg);
transform: rotate(270deg) skewY(-45deg);
}
.orange .segment-6 .slice-contents {
text-align: left;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -59%;
top: -35%;
width: 100px;
}
.orange .segment-6 .text {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.orange .segment-7 {
-webkit-transform: rotate(315deg) skewY(-45deg);
transform: rotate(315deg) skewY(-45deg);
}
.orange .segment-7 .slice-contents {
text-align: right;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -65%;
top: -49%;
width: 100px;
}
.orange .segment-7 .text {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.orange .segment-8 {
-webkit-transform: rotate(-315deg) skewY(-45deg);
transform: rotate(-315deg) skewY(-45deg);
}
.orange .segment-8 .slice-contents {
text-align: right;
-webkit-transform: skewY(45deg) rotate(45deg);
transform: skewY(45deg) rotate(45deg);
left: -60%;
top: -35%;
width: 100px;
}
.orange .segment-8 .text {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.blue-wrapper {
margin: 20px auto;
-webkit-transfor: rotate(-50deg);
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
position: relative;
left: -2%;
top: 60px;
}
/* Background image */
#blueCog {
height: 510px;
width: 510px;
position: absolute;
right: -8px;
top: -7px;
-webkit-transfor: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
/* segment 7 */
.blue .segment-1 {
-webkit-transform: rotate(325deg) skewY(-35deg);
transform: rotate(325deg) skewY(-35deg);
}
.blue .segment-1 .slice-contents {
text-align: left;
left: -71%;
top: -126%;
width: 110px;
-webkit-transform: skewY(35deg) rotate(120deg);
transform: skewY(35deg) rotate(120deg);
}
.blue .segment-1 .text {
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.blue .segment-2 {
-webkit-transform: rotate(80deg) skewY(-35deg);
transform: rotate(80deg) skewY(-35deg);
}
.blue .segment-2 .slice-contents {
text-align: right;
left: -69%;
top: -86%;
width: 100px;
-webkit-transform: skewY(35deg) rotate(90deg);
transform: skewY(35deg) rotate(90deg);
}
.blue .segment-2 .text {
-webkit-transform: rotate(-120deg);
transform: rotate(-120deg);
}
.blue .segment-3 {
-webkit-transform: rotate(135deg) skewY(-40deg);
transform: rotate(135deg) skewY(-40deg);
}
.blue .segment-3 .slice-contents {
text-align: right;
left: -70%;
top: -96%;
width: 100px;
-webkit-transform: skewY(40deg) rotate(90deg);
transform: skewY(40deg) rotate(90deg);
}
.blue .segment-3 .text {
-webkit-transform: rotate(185deg);
transform: rotate(185deg);
}
.blue .segment-4 {
-webkit-transform: rotate(185deg) skewY(-45deg);
transform: rotate(185deg) skewY(-45deg);
}
.blue .segment-4 .slice-contents {
text-align: left;
left: -52%;
top: -152%;
width: 100px;
-webkit-transform: skewY(46deg) rotate(136deg);
transform: skewY(46deg) rotate(136deg);
}
.blue .segment-4 .text {
-webkit-transform: rotate(88deg);
transform: rotate(88deg);
}
.blue .segment-5 {
-webkit-transform: rotate(230deg) skewY(-40deg);
transform: rotate(230deg) skewY(-40deg);
}
.blue .segment-5 .slice-contents {
text-align: right;
left: -71%;
top: -99%;
width: 100px;
-webkit-transform: skewY(40deg) rotate(90deg);
transform: skewY(40deg) rotate(90deg);
}
.blue .segment-5 .text {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.blue .segment-6 {
-webkit-transform: rotate(280deg) skewY(-45deg);
transform: rotate(280deg) skewY(-45deg)
}
.blue .segment-6 .slice-contents {
text-align: left;
left: -90%;
top: -110%;
width: 100px;
-webkit-transform: skewY(45deg) rotate(85deg);
transform: skewY(45deg) rotate(85deg);
}
.blue .segment-6 .text {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.blue .segment-7 {
-webkit-transform: rotate(15deg) skewY(-30deg);
transform: rotate(20deg) skewY(-30deg);
}
.blue .segment-7 .slice-contents {
text-align: center;
left: -40%;
top: -133%;
width: 100px;
-webkit-transform: skewY(30deg) rotate(140deg);
transform: skewY(30deg) rotate(140deg);
}
.blue .segment-7 .text {
-webkit-transform: rotate(-110deg);
transform: rotate(-110deg);
}
/* PURPLE CIRCLE STYLES
* Please note: the segment numbers are not the same as the section numbers on display
* Use inspect element to double check which section you are on & would like to edit.
*/
.purple-wrapper {
top: 34px;
left: -52px;
position: relative;
}
/* Background image */
#purpleCog {
height: 510px;
width: 510px;
position: absolute;
right: -8px;
top: -7px;
}
.purple .segment-1 {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.purple .segment-1 .slice-contents {
text-align: left;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
left: -33%;
top: 25%;
width: 110px;
}
.purple .segment-1 .text {
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.purple .segment-2 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.purple .segment-2 .slice-contents {
text-align: left;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
left: -36%;
top: 35%;
width: 110px;
}
.purple .segment-2 .text {
-webkit-transform: rotate(-120deg);
transform: rotate(-120deg);
}
.purple .segment-3 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.purple .segment-3 .slice-contents {
text-align: right;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
top: 45%;
left: -33%;
width: 100px;
}
.purple .segment-3 .text {
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.purple .segment-4 {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.purple .segment-4 .slice-contents {
text-align: right;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
left: -19%;
top: 38%;
width: 100px;
}
.purple .segment-4 .text {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
/*
* Pass, fail & enable, disable content
*/
.content-disabled {
pointer-events: none;
opacity: .4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}
.placeholder-image {
height: 25px;
width: 25px;
}
.tick {
height: 25px;
width: 25px;
margin-top: -2px;
}
/*
* Assessment loading Animation
*
.loading-assessments {
margin: 100px auto;
width: 80px;
height: 80px;
position: relative;
}
.loading-assessments img {
position: absolute;
left: -50px;
top: -40px;
} */
.loading-assessments {
margin: 10px auto;
width: 80px;
height: 80px;
right: 150px;
top: 100px;
position: relative;
z-index: 100;
}
.loading-assessments .loader {
height: 100%;
position: relative;
margin: auto;
width: 400px;
}
.loading-assessments .loader_cogs {
z-index: -2;
width: 100px;
height: 100px;
top: -120px !important;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loading-assessments .loader_cogs__top {
position: relative;
width: 100px;
height: 100px;
-webkit-transform-origin: 50px 50px;
transform-origin: 50px 50px;
-webkit-animation: rotate 5s infinite linear;
animation: rotate 5s infinite linear;
}
.loading-assessments .loader_cogs__top div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loading-assessments .loader_cogs__top div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loading-assessments .loader_cogs__top div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loading-assessments .loader_cogs__top div.top_part {
width: 100px;
border-radius: 10px;
position: absolute;
height: 100px;
background: #3FB0CE;
}
.loading-assessments .loader_cogs__top div.top_hole {
width: 50px;
height: 50px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loading-assessments .loader_cogs__left {
position: relative;
width: 80px;
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
top: 28px;
-webkit-transform-origin: 40px 40px;
transform-origin: 40px 40px;
-webkit-animation: rotate_left 5s .1s infinite reverse linear;
animation: rotate_left 5s .1s infinite reverse linear;
left: -24px;
height: 80px;
}
.loading-assessments .loader_cogs__left div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loading-assessments .loader_cogs__left div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loading-assessments .loader_cogs__left div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loading-assessments .loader_cogs__left div.left_part {
width: 80px;
border-radius: 6px;
position: absolute;
height: 80px;
background: #ffa626;
}
.loading-assessments .loader_cogs__left div.left_hole {
width: 40px;
height: 40px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.loading-assessments .loader_cogs__bottom {
position: relative;
width: 60px;
top: -65px;
-webkit-transform-origin: 30px 30px;
transform-origin: 30px 30px;
-webkit-animation: rotate_left 5.2s .4s infinite linear;
animation: rotate_left 5.2s .4s infinite linear;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
left: 79px;
height: 60px;
}
.loading-assessments .loader_cogs__bottom div:nth-of-type(1) {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.loading-assessments .loader_cogs__bottom div:nth-of-type(2) {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
.loading-assessments .loader_cogs__bottom div:nth-of-type(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loading-assessments .loader_cogs__bottom div.bottom_part {
width: 60px;
border-radius: 5px;
position: absolute;
height: 60px;
background: #9238c4;
}
.loading-assessments .loader_cogs__bottom div.bottom_hole {
width: 30px;
height: 30px;
border-radius: 100%;
background: white;
position: absolute;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* Animations */
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rotate_left {
from {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
to {
-webkit-transform: rotate(376deg);
transform: rotate(376deg);
}
}
@keyframes rotate_left {
from {
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
to {
-webkit-transform: rotate(376deg);
transform: rotate(376deg);
}
}
@-webkit-keyframes rotate_right {
from {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
to {
-webkit-transform: rotate(364deg);
transform: rotate(364deg);
}
}
@keyframes rotate_right {
from {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
to {
-webkit-transform: rotate(364deg);
transform: rotate(364deg);
}
}
/* MEDIA QUERIES
* Feel free to play around with these if you want a better experience
*/
/* Tablets */
@media screen and (max-width: 1014px) {
header {
text-align: center;
}
.pie {
font-size: 13px;
height: 350px;
width: 350px;
}
.cogWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-start;
-ms-flex-line-pack: center;
align-content: center;
position: relative;
}
#orangeCog,#blueCog,#purpleCog {
height: 455px;
width: 455px;
position: absolute;
right: -4px;
top: -4px;
}
.section-progress {
border-radius: 5px;
color: #fff;
margin: 0 auto;
text-align: left;
width: 95%;
}
.section-inner-wrapper {
margin-bottom: 50px;
text-align: center;
}
.section-1,
.section-2,
.section-3,
.section-4 {
margin: 0 auto;
width: 80%;
}
.orange-wrapper,
.blue-wrapper,
.purple-wrapper {
margin-bottom: 5%;
margin-top: 2.5%;
margin-right: 2%;
font-size: .9em;
left: 0;
top: 0;
margin: 0 auto;
}
.tick {
height: 20px;
width: 20px;
}
.orange .segment-6 .slice-contents {
left: -68%;
}
.orange .segment-8 .slice-contents {
left: -60%;
}
.orange .segment-4 .slice-contents {
top: -108%;
}
.orange .segment-3 .slice-contents {
left: -65%;
top: -48%;
}
.orange .segment-2 .slice-contents {
left: -64%;
top: -35%;
}
.blue .segment-4 .slice-contents {
left: -58%;
top: -153%;
}
.blue .segment-2 .slice-contents {
left: -78%;
top: -87%;
}
.blue .segment-3 .slice-contents {
left: -72%;
top: -94%;
}
.blue .segment-5 .slice-contents {
left: -79%;
}
.blue .segment-7 .slice-contents {
left: -44%;
top: -132%;
}
.purple .segment-1 .slice-contents {
left: -37%;
top: 22%;
}
.purple .segment-2 .slice-contents {
top: 33%;
}
.purple .segment-3 .slice-contents {
top: 49%;
left: -37%;
}
}
/* Laptops */
@media screen and (min-width: 1015px) and (max-width: 1363px) {
.cogWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-start;
-ms-flex-line-pack: center;
align-content: center;
position: relative;
}
.orange-wrapper,
.blue-wrapper,
.purple-wrapper {
left: 2%
}
}</style></head><body>
<body>
<div class="container">
<header>
<h1>Introduction to the module</h1>
</header>
<div class="section-progress">
<div id="cog0" class="section-inner-wrapper">
<div class="section-1" id="c0s1-text"><h3>Section 1</h3><p>Our aims and outcomes</p></div>
<div class="section-2" id="c0s2-text"><h3>Section 2</h3><p>The Australian Medical Home</p></div>
<div class="section-3" id="c0s3-text"><h3>Section 3</h3><p>Our three jobs</p></div>
<div class="section-4" id="c0s4-text"><h3>Section 4</h3><p>The Person-Centred Health System</p></div>
</div>
</div>
<!-- Assessment preloader -->
<!-- <div class="loading-assessments">
<img src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/assets/loading-gears.gif" />
</div> -->
<div class="loading-assessments">
<div class='loader'>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'><!-- lol --></div>
</div>
</div>
</div>
</div>
<div class="cogWrapper content-disabled">
<!--PIE ORANGE -->
<div class="orange-wrapper">
<img id="orangeCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog1.png">
<ul id="cog1" class='pie orange'>
<a href="cluster1/section2/cluster1-section2-001.html">
<li class='slice segment-1'>
<div class='slice-contents'>
<div id="c1s2-text" class="text">
<h3>Section 2</h3>
<p>A culture of <br> improvement</p>
</div>
</div>
</li>
</a>
<a href="cluster1/section4/cluster1-section4-001.html">
<li class='slice segment-2'>
<div class='slice-contents'>
<div id="c1s4-text" class="text">
<h3>Section 4</h3>
<p>Rules of <br> improvement</p>
</div>
</div>
</li>
</a>
<a href="cluster1/section5/cluster1-section5-001.html">
<li class='slice segment-3'>
<div class='slice-contents'>
<div id="c1s5-text" class="text">
<h3>Section 5</h3>
<p>Leading change</p>
</div>
</div>
</li>
</a>
<a href="cluster1/section6/cluster1-section6-001.html">
<li class='slice segment-4'>
<div class='slice-contents'>
<div id="c1s6-text" class="text">
<h3>Section 6</h3>
<p>An improvement map</p>
</div>
</div>
</li>
</a>
<li class='slice segment-5'>
<div class='slice-contents'>
<div class="text">
<h3>Section 7</h3>
<p>Safety (part 1)</p>
<!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail -->
</div>
</div>
</li>
<li class='slice segment-6'>
<div class='slice-contents'>
<div class="text">
<h3>Section 8</h3>
<p>Safety (part 2)</p>
<!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail -->
</div>
</div>
</li>
<!-- Section 1 -->
<a href="cluster1/section1/cluster1-section1-001.html">
<li class='slice segment-7'>
<div class='slice-contents'>
<div id="c1s1-text" class="text">
<h3>Section 1</h3>
<p>Our aim</p>
</div>
</div>
</li>
</a>
<a href="cluster1/section3/cluster1-section3-001.html">
<li class='slice segment-8'>
<div class='slice-contents'>
<div id="c1s3-text" class="text">
<h3>Section 3</h3>
<p>Focus on quality</p>
</div>
</div>
</li>
</a>
</ul>
</div>
<!--PIE BLUE -->
<div class="blue-wrapper">
<img id="blueCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog2.png">
<ul id="cog2" class='pie blue'>
<a href="cluster2/section7/cluster2-section7-001.html">
<li class='slice segment-1'>
<div class='slice-contents'>
<div id="c2s7-text" class="text">
<h3>Section 7</h3>
<p>Polypharmacy case studies</p>
<!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail
<span class="section-result" id="blue-s1-result"><img id="tick" src="images/icon_tick.png"></span> -->
</div>
</div>
</li>
</a>
<a href="cluster2/section2/cluster2-section2-001.html">
<li class='slice segment-2'>
<div class='slice-contents'>
<div id="c2s2-text" class="text">
<h3>Section 2</h3>
<p>Develop systems for proactive CDM</p>
<span class='placeholder-image'> </span>
</div>
</div>
</li>
</a>
<a href="cluster2/section3/cluster2-section3-001.html">
<li class='slice segment-3'>
<div class='slice-contents'>
<div id="c2s3-text" class="text">
<h3>Section 3</h3>
<p>Chronic condition <br> consultations</p>
<span class='placeholder-image'> </span>
</div>
</div>
</li>
</a>
<a href="cluster2/section4/cluster2-section4-001.html">
<li class='slice segment-4'>
<div class='slice-contents'>
<div id="c2s4-text" class="text">
<h3>Section 4</h3>
<p>Patient self-management <br> & integrated care</p>
</div>
</div>
</li>
</a>
<a href="cluster2/section5/cluster2-section5-001.html">
<li class='slice segment-5'>
<div class='slice-contents'>
<div id="c2s5-text" class="text">
<h3>Section 5</h3>
<p>Multimorbidity (part 1)</p>
</div>
</div>
</li>
</a>
<a href="cluster2/section6/cluster2-section6-001.html">
<li class='slice segment-6'>
<div class='slice-contents'>
<div id="c2s6-text" class="text">
<h3>Section 6</h3>
<p>Multimorbidity (part 2)</p>
</div>
</div>
</li>
</a>
<a href="cluster2/section1/cluster2-section1-001.html">
<li class='slice segment-7'>
<div class='slice-contents'>
<div id="c2s1-text" class="text">
<h3>Section 1</h3>
<p>Improvement map and herd health</p>
</div>
</div>
</li>
</a>
</ul>
</div>
<!--PIE PURPLE-->
<div class="purple-wrapper">
<img id="purpleCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog3.png">
<ul id="cog3" class='pie purple'>
<a href="cluster3/section2/cluster3-section2-001.html">
<li class='slice segment-1'>
<div class='slice-contents'>
<div id="c3s2-text" class="text">
<h3>Section 2</h3>
<p>Engaging your team</p>
</div>
</div>
</li>
</a>
<a href="cluster3/section3/cluster3-section3-001.html">
<li class='slice segment-2'>
<div class='slice-contents'>
<div id="c3s3-text" class="text">
<h3>Section 3</h3>
<p>Measures of team <br> engagement</p>
</div>
</div>
</li>
</a>
<a href="cluster3/section4/cluster3-section4-001.html">
<li class='slice segment-3'>
<div class='slice-contents'>
<div id="c3s4-text" class="text">
<h3>Section 4</h3>
<p>The Real Work</p>
</div>
</div>
</li>
</a>
<a href="cluster3/section1/cluster3-section1-001.html">
<li class='slice segment-4'>
<div class='slice-contents'>
<div id="c3s1-text" class="text">
<h3>Section 1</h3>
<p>Kotter's change model</p>
<!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail -->
</div>
</div>
</li>
</a>
</ul>
</div>
</div><!-- Cog Wrapper -->
</div><!-- Container -->
<div id="assessmentContainer"></div>
<div id="testingContainer"></div>
</body>
<!--
<body>
<div class="cogWrapper">
<div class="cogInside">
<div class="cog" id="cog1">
<div class="cogPadding">
<a href="#"><div class="smallCog">Topic 1 - How to create a new html page</div></a>
<a href="#"><div class="smallCog">Topic 2 - How to insert CSS into your new html page</div></a>
<a href="#"><div class="smallCog">Topic 3 - </div></a>
<div class="smallCog" id="cogResult1">Assessment not attempted</div>
</div>
</div>
</div>
<div class="cogInside cogInsideMiddle">
<div class="cog" id="cog2">
<div class="cogPadding">
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<div class="smallCog" id="cogResult2">Assessment not attempted</div>
</div>
</div>
</div>
<div class="cogInside">
<div class="cog" id="cog3">
<div class="cogPadding">
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<a href="#"><div class="smallCog"> </div></a>
<div class="smallCog" id="cogResult3">Assessment not attempted</div>
</div>
</div>
</div>
</div>
<div id="assessmentContainer"></div>
<div class="pollWrapper">
<div id="pollContainer"></div>
</div>
</body> -->
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >setTimeout(function() {
$(".cogWrapper").removeClass("content-disabled");
$(".loading-assessments").remove();
}, 1)
$("head").append('<link href="../common_module_files/styles/ehealth_enabled_mgmt_of_chronic_conditions.css" rel="stylesheet" type="text/css" />');
//# sourceURL=pen.js
</script>
</body></html>
