5 contents

sco125cs80_watcha/adlcp_rootv1p2.xsd

@@ -0,0 +1,110 @@
+<?xml version="1.0"?>
+<!-- filename=adlcp_rootv1p2.xsd -->
+<!-- Conforms to w3c http://www.w3.org/TR/xmlschema-1/ 2000-10-24-->
+
+<xsd:schema xmlns="http://www.adlnet.org/xsd/adlcp_rootv1p2"
+            targetNamespace="http://www.adlnet.org/xsd/adlcp_rootv1p2"
+            xmlns:xml="http://www.w3.org/XML/1998/namespace"
+            xmlns:imscp="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
+            xmlns:xsd="http://www.w3.org/2001/XMLSchema"
+            elementFormDefault="unqualified"
+            version="ADL Version 1.2">
+
+        <xsd:import namespace="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
+         schemaLocation="imscp_rootv1p1p2.xsd"/>
+
+        <xsd:element name="location" type="locationType"/>
+        <xsd:element name="prerequisites" type="prerequisitesType"/>
+        <xsd:element name="maxtimeallowed" type="maxtimeallowedType"/>
+        <xsd:element name="timelimitaction" type="timelimitactionType"/>
+        <xsd:element name="datafromlms" type="datafromlmsType"/>
+        <xsd:element name="masteryscore" type="masteryscoreType"/>
+
+
+        <xsd:element name="schema" type="newSchemaType"/>
+        <xsd:simpleType name="newSchemaType">
+                <xsd:restriction base="imscp:schemaType">
+                        <xsd:enumeration value="ADL SCORM"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:element name="schemaversion" type="newSchemaversionType"/>
+        <xsd:simpleType name="newSchemaversionType">
+                <xsd:restriction base="imscp:schemaversionType">
+                        <xsd:enumeration value="1.2"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+
+        <xsd:attribute name="scormtype">
+            <xsd:simpleType>
+                <xsd:restriction base="xsd:string">
+                   <xsd:enumeration value="asset"/>
+                   <xsd:enumeration value="sco"/>
+                </xsd:restriction>
+            </xsd:simpleType>
+        </xsd:attribute>
+
+        <xsd:simpleType name="locationType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="2000"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+
+        <xsd:complexType name="prerequisitesType">
+           <xsd:simpleContent>
+              <xsd:extension base="prerequisiteStringType">
+                  <xsd:attributeGroup ref="attr.prerequisitetype"/>
+              </xsd:extension>
+           </xsd:simpleContent>
+        </xsd:complexType>
+
+        <xsd:attributeGroup name="attr.prerequisitetype">
+                <xsd:attribute name="type" use="required">
+                        <xsd:simpleType>
+                                <xsd:restriction base="xsd:string">
+                                   <xsd:enumeration value="aicc_script"/>
+                                </xsd:restriction>
+                        </xsd:simpleType>
+                </xsd:attribute>
+        </xsd:attributeGroup>
+
+        <xsd:simpleType name="maxtimeallowedType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="13"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="timelimitactionType">
+                <xsd:restriction base="stringType">
+                        <xsd:enumeration value="exit,no message"/>
+                        <xsd:enumeration value="exit,message"/>
+                        <xsd:enumeration value="continue,no message"/>
+                        <xsd:enumeration value="continue,message"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="datafromlmsType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="255"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="masteryscoreType">
+                <xsd:restriction base="xsd:string">
+                        <xsd:maxLength value="200"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+        <xsd:simpleType name="stringType">
+                <xsd:restriction base="xsd:string"/>
+        </xsd:simpleType>
+        
+        <xsd:simpleType name="prerequisiteStringType">
+                <xsd:restriction base="xsd:string">
+                   <xsd:maxLength value="200"/>
+                </xsd:restriction>
+        </xsd:simpleType>
+
+</xsd:schema>

sco125cs80_watcha/api.js

@@ -0,0 +1,233 @@
+var API = null;
+var callAPI = 0;
+var scoPageAPI = 0;
+var LastScore = -1;
+var ScormStartTime = (new Date()).getTime();
+
+//Log Console
+function logconsole(msg){
+
+	if (typeof console === "undefined" || typeof console.log === "undefined"){
+		
+	}else{
+		console.log(msg)
+	}
+
+}
+
+/* Check SCORM API or AlterScorm */
+function findAPI(win){
+
+	try{
+
+		while ((win.API == null) && (win.parent != null) && (win.parent != win))
+		{
+			win = win.parent;
+
+			callAPI = callAPI + 1;
+
+		}
+		
+		API = win.API;
+		
+	}catch(exception){
+		return false;
+		
+	}
+
+}
+
+/* initialize the SCORM API */
+function initAPI(win){
+	
+	try{
+
+		/* look for the SCORM API up in the frameset */
+		findAPI(win);
+		
+		/* if we still have not found the API, look at the opener and its frameset */
+		if ((API == null) && (win.opener != null))
+		{
+			findAPI(win.opener);
+		}
+
+	}catch(exception){
+
+		logconsole("findAPI error");
+		return false;
+
+	}
+
+}
+
+function ScormStartComProcess(){
+	
+	initAPI(window);
+	
+	if (API != null){
+		
+		var initOk = false;
+		
+		//SCORM 1.2
+		if (typeof(API.LMSInitialize) != "undefined") {
+
+         if (typeof(API.haveInit) === "undefined") {
+            API.LMSInitialize('');
+			API.countTime = ScormStartTime;
+			API.haveInit = true;
+            logconsole("Init SCORM");
+         }
+        
+      }
+
+	}
+	
+}
+
+function getLMSLocation(){
+
+	if (API != null){
+
+		if(typeof(API.LMSSetValue)!= "undefined"){
+			scoPageAPI = API.LMSGetValue("cmi.core.lesson_location");
+			if(typeof(API.lessonlocation) != "undefined") {
+				if(API.lessonlocation>scoPageAPI){
+					scoPageAPI = API.lessonlocation
+				}
+			}
+			if(scoPageAPI===undefined){scoPageAPI = 1;}
+			if(scoPageAPI==""){scoPageAPI = 1;}
+			return scoPageAPI;
+		}else{
+			return 1;
+		}
+
+	}
+
+}
+
+function sendLMSLocation(nPage,maxPage){
+
+	if (API != null){
+
+		if(typeof(API.LMSSetValue)!= "undefined"){
+
+			scoPageAPI = API.LMSGetValue("cmi.core.lesson_location");
+			
+			if(scoPageAPI===undefined){scoPageAPI = 1;}
+			if(scoPageAPI==""){scoPageAPI = 1;}
+
+			if(typeof(API.lessonlocation) === "undefined") {
+				API.lessonlocation = scoPageAPI;
+			}else{
+				if(scoPageAPI<API.lessonlocation){
+					scoPageAPI = API.lessonlocation;
+				}
+			}
+
+			if(nPage>scoPageAPI){
+				
+				//Normal Moodle Protocol
+				//API.LMSSetValue('cmi.core.lesson_location',nPage);
+				//API.LMSCommit('');
+
+				if(nPage>API.lessonlocation){
+					API.lessonlocation = nPage;
+				}
+				
+				//Hack Chamilo LMS
+				if(typeof(API.save_asset)!= "undefined"){
+					var olms = parent.olms;
+					if(olms.lms_item_type=='sco'){
+						var lk = getLocUrl() + 'scorm-save-location.php';
+						$.ajax({
+							url: lk + "?loc=" + nPage + '&id=' + localIdTeachdoc
+						}).done(function(){
+							logconsole("loc:" + nPage);
+						});
+					}
+					
+				}
+			}
+
+		}
+
+	}
+
+}
+
+function getLocUrl(){
+
+	var urlOrigin = window.top.location.origin + "/";
+	if(urlOrigin.indexOf('://localhost')!=-1){
+		urlOrigin = location.protocol + "//" + document.domain + "/" + location.pathname.split('/')[1] + "/";
+	}
+	return urlOrigin + "plugin/adv_oel_tools_teachdoc/ajax/sco/"; 
+
+}
+
+ScormStartComProcess();
+
+function CheckLMSFinishFinal(){
+
+	var score = API.LMSGetValue('cmi.core.score.raw');
+	var status = API.LMSGetValue('cmi.core.lesson_status');
+
+	if(typeof(API.haveScormSubmitted) === "undefined") {
+		API.haveScormSubmitted = false;
+	}
+	
+	if(API.haveScormSubmitted == false){
+		
+		API.haveScormSubmitted = true;
+		
+		if(typeof(API.LMSSetValue)!= "undefined"){
+			if(score!=100&&status!='completed'){
+				API.LMSSetValue('cmi.core.score.raw', 100);
+				API.LMSSetValue('cmi.core.lesson_status','completed');
+				API.LMSCommit('');
+				if(typeof(API.LMSFinish) != "undefined"&&score!=100){
+					API.LMSFinish('');
+				}
+			}else{
+				API.LMSSetValue('cmi.core.session_time', MillisecondsToTime((new Date()).getTime() - API.countTime));
+				ScormStartTime = (new Date()).getTime();
+				API.countTime = ScormStartTime;
+				API.LMSCommit('');
+			}
+		}
+		
+	}
+	
+}
+
+setTimeout(function(){sendTimeToLms();},30000);
+
+function sendTimeToLms(){
+	if (API != null){
+
+		if(typeof(API.LMSSetValue)!= "undefined"){
+			var sendT = MillisecondsToTime((new Date()).getTime() - API.countTime);
+			console.log('sendT:'+sendT);
+			API.LMSSetValue('cmi.core.session_time',sendT);
+			ScormStartTime = (new Date()).getTime();
+			API.countTime = ScormStartTime;
+			API.LMSCommit('');
+		}
+		setTimeout(function(){sendTimeToLms();},60000);
+		
+	}
+}
+
+//TIME RENDERING FUNCTION
+function MillisecondsToTime(Seconds){
+	Seconds = Math.round(Seconds/1000);
+	var S = Seconds % 60;
+	Seconds -= S;
+	if (S < 10){S = '0' + S;}
+	var M = (Seconds / 60) % 60;
+	if (M < 10){M = '0' + M;}
+	var H = Math.floor(Seconds / 3600);
+	if (H < 10){H = '0' + H;}
+	return H + ':' + M + ':' + S;
+}

sco125cs80_watcha/css/plug.css

@@ -0,0 +1,688 @@
+
+.plugcard {
+    position : absolute;
+    top : 50%;
+    left : 50%;
+    width : 300px;
+    height : 300px;
+    transform : translate(-50%, -50%);
+    transform-style : preserve-3d;
+    perspective : 600px;
+    transition : 0.5s;
+}
+.plugcard:focus .plugcard-front {
+    transform: rotateX(-180deg);
+}
+.plugcard:focus .plugcard-back {
+    transform: rotateX(0deg);
+}
+.plugcard-front {
+    height: 100%;
+    width: 100%;
+    cursor : pointer;
+    background-position : 50% 50%;
+    background-size : cover;
+    border : solid 1px gray;
+    border-radius : 4px;
+    position : absolute;
+    top : 0;
+    left : 0;
+    background-color : #b4b4b4;
+    backface-visibility : hidden;
+    transform : rotateX(0deg);
+    transition : 0.5s;
+}
+
+.plugcard-back {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;left: 0;
+    background-color: #ffffff;
+    border : solid 1px gray;
+    border-radius: 4px;
+    backface-visibility: hidden;
+    transform: rotateX(180deg);
+    transition: 0.5s;
+    color: #252525;
+    text-align: center;
+}
+.plugcard-back h2 {
+    margin : 45% auto 35% auto!important;
+    font-size : 18px;
+    box-shadow : none;
+    background-color : transparent;
+    color : black;
+    text-align : center;
+    padding-left : 5px!important;
+    padding-right : 5px!important;
+}
+
+.forceplug300{
+    position : relative;
+    width:2px;
+    height:300px;
+}
+.avatar-minidia
+{
+    position : absolute;
+    left : 5px;
+    top : 5px;
+    width : 15%;
+    bottom : 5px;
+    background-position : center center;
+    background-size : contain;
+    background-repeat : no-repeat;
+    z-index : 10;
+}
+.dialog-minidia
+{
+    position : relative;
+    float : right;
+    right : 5px;
+    top : 5px;
+    width : 80%;
+    min-height : 150px;
+    z-index : 9;
+}
+
+.bubble-minidia
+{
+   text-align: left;
+   padding : 10px;
+   background : #ffffff;
+   border-radius : 4px;
+   border : #353535 solid 2px;
+}
+
+.bubble-minidia:after
+{
+    content : '';
+    position : absolute;
+    border-style : solid;
+    border-width : 15px 22px 15px 0;
+    border-color : transparent #ffffff;
+    display : block;
+    width : 0;
+    z-index : 1;
+    left : -22px;
+    top : 50%;
+    margin-top : -10px;
+}
+
+.bubble-minidia:before
+{
+    content: '';
+    position: absolute;
+    border-style: solid;
+    border-width: 16px 23px 16px 0;
+    border-color: transparent #353535;
+    display: block;
+    width: 0;
+    z-index: 0;
+    left: -25px;
+    top: 50%;
+    margin-top: -10px;
+}
+
+@media (max-width: 800px){
+    .avatar-minidia
+    {
+        position : absolute;
+        left : -10px;
+        top : -15px;
+        width : 60px;
+        height : 60px;
+        background-color : #ffffff;
+        background-size : cover;
+        background-position : center top;
+        border : #353535 solid 1px;
+        border-radius : 50%;
+    }
+    .dialog-minidia
+    {
+        position : relative;
+        padding-top : 15px;
+        padding-left : 5px;
+        padding-right : 5px;
+        padding-bottom : 5px;
+        float : right;
+        top : 15px;
+        width : 98%;
+        bottom : 3px;
+    }
+    .bubble-minidia:after
+    {
+        visibility: hidden;
+    }
+    .bubble-minidia:before
+    {
+        visibility: hidden;
+    }
+}
+.areaZA {
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 10%;
+    height: 10%;
+    cursor:pointer;
+    border: solid 0px gray;
+    background-position: center center;
+    background-size: contain;
+    z-index: 98;
+}
+
+.areaZAHidden {
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 10%;
+    height: 10%;
+    cursor:pointer;
+    border: solid 0px gray;
+    background-position: center center;
+    z-index: 98;
+}
+
+.overViewZAedition{
+    position: absolute;
+    width: 10%;
+    height: 10%;
+    border: solid 1px red;
+    background-position: center center;
+    z-index: 98;
+}
+
+.areaimgdeco{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    cursor:pointer;
+    background-image: url(../img/classique/point-circle.svg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    animation-duration: 2s;
+    animation-iteration-count :infinite;
+    animation-name: rotatecircleanim;
+    animation-timing-function: linear;
+}
+@keyframes rotatecircleanim {
+    from { transform: rotate(  0deg); }
+    to   { transform: rotate(360deg); }
+}
+
+.areaimgpointingleft{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 70px;
+    height: 70px;
+    margin-top: -35px;
+    background-image: url(../img/classique/pointing-left.svg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    animation-duration: 2s;
+    animation-iteration-count :infinite;
+    animation-name: pointinglefttranslate;
+    animation-timing-function: linear;
+}
+@keyframes pointinglefttranslate {
+    0% { left: 50%; }
+    30%   { left:  70%; }
+    35%   { left:  50%;  }
+    40%   { left:  60%;  }
+    50%   { left: 50%; }
+    100%   { left: 50%; }
+}
+
+.areaimgcursor{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 70px;
+    height: 70px;
+    background-image: url(../img/classique/cursor.svg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    animation-duration: 3s;
+    animation-iteration-count :infinite;
+    animation-name: rotatecirclecursor;
+    animation-timing-function: linear;
+}
+.areaimgcursorsmall{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 40px;
+    height: 40px;
+    background-image: url(../img/classique/cursor.svg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    animation-duration: 3s;
+    animation-iteration-count :infinite;
+    animation-name: rotatecirclecursor;
+    animation-timing-function: linear;
+}
+@keyframes rotatecirclecursor {
+    0% { left: 100%;top: 150%; transform: rotate(  10deg); }
+    30%   { left:  50%;top: 50%; transform: rotate(0deg); }
+    35%   { transform: scale(0.95); }
+    40%   { transform: scale(1); }
+    45%   { transform: scale(0.95); }
+    50%   { transform: scale(1); }
+    100%   { transform: scale(1); }
+}
+
+
+
+.imageactive {
+    position: relative;
+    width : 100%;
+    overflow: hidden;
+}
+.plugimageactive{
+    overflow: hidden;
+}
+
+.centerMessageChalkBoard{
+    position : absolute;
+    bottom : -10%;
+    left : 50%;
+    font-size : 16px;
+    width : 90%;
+    max-width : 400px;
+    padding : 10px;
+    text-align: center;
+    min-height : 20px;
+    height : auto; 
+    transform: translateX(-50%);
+    border : 1px solid #b4b4b4;
+    color: rgb(27, 27, 27);
+    background-color : white;
+    box-shadow:	0 0.125rem 2.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
+    border-radius : 2px;
+    z-index : 300;
+    display : none;
+}
+
+.speech-bubble {
+    position : absolute;
+    top : 5%;
+    left : 5%;
+    background: #ffffff;
+    color: rgb(27, 27, 27);
+    font-size: 14px;
+    line-height: 16px;
+    padding: 10px;
+    position: relative;
+    text-align: center;
+    vertical-align: top;
+    width: 150px;
+    margin-left: -75px;
+    z-index: 99;
+    box-shadow:	0 0.125rem 2.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
+ }
+ .speech-bubble:after {
+	border: 1em solid transparent;
+	border-top-color: #ffffff;
+	content: '';
+	margin-left: -1em;
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	width: 0;
+	height: 0;
+    z-index: 99;
+}
+
+.lifebarcontain{
+    text-align : center;
+}
+
+.onelifeopt{
+    position : relative;
+    display : inline-block;
+    width : 28px;
+    height : 28px;
+    z-index : 1;
+    background-image : url(../img/classique/lifeeart.png);
+    background-repeat : no-repeat;
+    background-size : contain;
+}
+
+
+.overViewBack {
+    position : fixed;
+    left: 0px; top : 0px;
+    right : 0px; bottom : 0px;
+    background-color : #273746;
+    opacity : 0.6;
+    z-index : 1004;
+}
+
+#imgViewBack {
+    position : fixed;
+    background-color : #CCD1D1;
+    border-radius : 4px;
+    background-repeat : no-repeat;
+    background-position : center center;
+    z-index : 1005;
+}
+
+.imgScrView {
+    position : fixed;
+    background-repeat : no-repeat;
+    background-position : center center;
+    z-index : 1006;
+}
+
+.closeImgViewSrc {
+    position : absolute;
+	top : -23px;
+    right : 50%;
+    margin-right : -23px;
+	width : 46px; 
+    height : 46px;
+	border-radius : 23px;
+	cursor : pointer;
+    background-color : white;
+    background-size: 30px 30px;
+    border : solid 1px #808B96;
+	background-repeat : no-repeat;
+	background-position : center center;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSA1IDE0IDE0bS0xNCAwIDE0LTE0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+);
+    z-index : 1007;
+}
+
+
+.oelcardinfo {
+  display: flex;
+  flex-direction: column;
+  margin: 1rem auto;
+  box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.5);
+  margin-bottom: 1.6%;
+  margin-top: -1px;
+  margin-bottom: -1px;
+  background: #fff;
+  line-height: 1.4;
+  border-radius: 5px;
+  overflow: hidden;
+  z-index: 0;
+}
+.oelcardinfo a {
+  color: inherit;
+}
+.oelcardinfo a:hover {
+  color: #5ad67d;
+}
+.oelcardinfo:hover .meta .photo {
+  transform: scale(1.1) rotate(3deg);
+}
+.oelcardinfo:hover .metacircle .photo {
+  transform: scale(1.05) rotate(3deg);
+}
+
+.oelcardinfo .meta {
+  position: relative;
+  z-index: 0;
+  height: 200px;
+}
+.oelcardinfo .metacircle {
+  position: relative;
+  z-index: 0;
+  height: 200px;
+}
+.oelcardinfo .meta .photo {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-size: cover;
+  background-position: center;
+  transition: transform 0.2s;
+  background-image: url(../img/classique/oel-man-working.jpg);
+}
+
+.oelcardinfo .metacircle .photo {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  border-radius: 50%;
+  width : 180px;
+  height : 180px;
+  margin-left:-90px;
+  margin-top:-90px;
+  border :  solid 6px pink;
+  border-color : var(--main-color-1, #b3b3b3);
+  z-index:2;
+  background-size : cover;
+  background-position : center;
+  transition : transform 0.5s;
+  background-image : url(../img/classique/oel-man-working.jpg);
+}
+
+.oelcardinfo .fotowtitle {
+  background : #fff;
+  position: relative;
+  height: 260px;
+  z-index : 1;
+}
+.oelcardinfo .fotowtitle .photo {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-size: cover;
+  background-position: center;
+  transition: transform 0.2s;
+  background-image: url(../img/classique/oel-man-working.jpg);
+}
+
+.oelcardinfo .describox50 {
+  padding : 1.4rem;
+  background : #fff;
+  position: relative;
+  z-index : 1;
+  text-align : left;
+}
+.oelcardinfo .descrimg50 {
+  padding : 1.4rem;
+  background : #fff;
+  position: relative;
+  z-index : 1;
+  text-align : left;
+}
+.oelcardinfo .descrimg50 .photo {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  transition: transform 0.2s;
+  background-image: url(../img/classique/iconduck-person-happy-computer-desk-work-office.png);
+}
+
+.oelcardinfo .describox50 p{
+  padding-left : 40px;
+}
+.oelcardinfo .describox50 li{
+  list-style: inside url('img/classique/check-circle.svg');
+  padding:3px;
+}
+.fillcoloroel{
+  fill: green;
+}
+.oelcardinfo .description {
+  padding : 1.4rem;
+  background : #fff;
+  position: relative;
+  z-index : 1;
+  text-align : left;
+}
+.oelcardinfo .description h1,
+.oelcardinfo .description h2 {
+  font-family: Poppins, sans-serif;
+}
+.oelcardinfo .oelcardinfoh1 {
+  line-height: 1;
+  margin: 0;
+  font-size: 1.7rem;
+}
+.oelcardinfo .oelcardinfoh2 {
+  font-size: 1rem;
+  font-weight: 300;
+  text-transform: uppercase;
+  color: #a2a2a2;
+  margin-top: 5px;
+}
+.oelcardinfo .oelcardinfoh3 {
+  position : relative;
+  font-size: 1.5rem;
+  font-weight: 300;
+  color: #6d6d6d;
+  margin-top: 5px;
+  text-align : center;
+}
+
+.oelcardinfo .oeltxtcenter {
+  text-align: center;
+}
+
+.oelcardinfo p{
+  position: relative;
+  margin: 1rem 0 0;
+}
+.oelcardinfo p:first-of-type {
+  margin-top: 1.25rem;
+}
+
+.oelcardinfoline p:first-of-type:before {
+  content : "";
+  position : absolute;
+  height : 5px;
+  background-color : var(--main-color-1, #b3b3b3);
+  width : 35px;
+  top : -0.75rem;
+  border-radius : 3px;
+}
+.oelcardinfoline ul {
+  position : relative;
+}
+
+.oelcardinfo .oelcardseparatorline {
+  content : "";
+  position : relative;
+  height : 4px;
+  background-color : var(--main-color-1, #b3b3b3);
+  width : 80%;
+  margin-left : 10%;
+  margin-bottom : 0.35rem;
+  margin-top : 0.45rem;
+  border-radius : 2px;
+}
+
+.oelcardinfolinelarge p:first-of-type:before {
+  content : "";
+  position : absolute;
+  left:50%;
+  margin-left:-120px;
+  height : 5px;
+  background-color : var(--main-color-1, #b3b3b3);
+  width : 240px;
+  top : -0.75rem;
+  border-radius : 3px;
+}
+
+.oelcardinfo:hover .details {
+  left: 0%;
+}
+
+.oelcardinfo .fotowtitle .oelcentertitle {
+  position: absolute;
+  right : 0px;
+  bottom : 0px;
+  text-align: center;
+  min-width : 180px;
+  max-width : 300px;
+  min-height : 22px;
+  line-height: 22px;
+  border-top-left-radius: 10px;
+  border-top :  solid 5px pink;
+  border-left :  solid 5px pink;
+  border-color : var(--main-color-1, #b3b3b3);
+  padding : 7px;
+  background-color: #fff;
+  opacity : 0.9;
+  z-index : 3;
+}
+
+.oelcardinfo .fotowtitle .oelcentertitle p{
+  padding : 2px;
+  margin: 2px;
+}
+
+@media (min-width: 640px) {
+  .oelcardinfo {
+      flex-direction: row;
+      max-width: 800px;
+  }
+  .oelcardinfo .meta {
+      flex-basis: 40%;
+      height: auto;
+  }
+  .oelcardinfo .metacircle {
+      flex-basis: 40%;
+      height: auto;
+  }
+  .oelcardinfo .description {
+      flex-basis: 60%;
+  }
+  .oelcardinfo .fotowtitle {
+    flex-basis: 100%;
+}
+  .oelcardinfo .description:before {
+      transform: skewX(-3deg);
+      content: "";
+      background: #fff;
+      width: 30px;
+      position: absolute;
+      left: -10px;
+      top: 0;
+      bottom: 0;
+      z-index: -1;
+  }
+  .oelcardinfo.alt {
+     flex-direction: row-reverse;
+  }
+  .oelcardinfo.alt .description:before {
+      left: inherit;
+      right: -10px;
+      transform: skew(3deg);
+  }
+  .oelcardinfo.alt .details {
+      padding-left: 25px;
+  }
+
+  .oelcardinfo .describox50 {
+    flex-basis: 50%;
+  }
+  .oelcardinfo .descrimg50 {
+    flex-basis: 50%;
+  }
+
+}
+
+span.typesource{display:none;}
+span.datatext1{display:none;}
+span.datatext2{display:none;}
+span.datatext3{display:none;}

sco125cs80_watcha/css/scorm.css

@@ -0,0 +1,870 @@
+/*
+    oel TeachDoc
+*/
+body{
+    background-color: #D8D8D8;
+}
+
+.panel-teachdoc{
+    position : absolute;
+    left : 0px;
+    right : 0px;
+    top : 100px;
+    width : 90%;
+    max-width : 900px;
+    padding-top : 30px;
+    padding-right : 30px;
+    padding-left : 30px;
+    padding-bottom : 30px;
+    margin-top : 50px;
+    margin-right : auto;
+    margin-left : auto;
+    margin-bottom : 30px;
+    background-color : white;
+    box-shadow : rgba(0, 0, 0, 0.25) 0px 3px 10px 0px;
+    color : black;
+    font-style : normal;
+    font-family : Arial;
+    font-stretch : normal;
+    font-variant-caps : normal;
+    font-variant-ligatures : normal;
+    font-variant-numeric : normal;
+    font-variant-east-asian : normal;
+    line-height : normal;
+    font-weight : 100;
+    opacity :0.3;
+    transition: top 0.5s, opacity 1s;
+}
+
+.panel-teachdoc-large{
+    position : absolute;
+    left : 0px;
+    width : 90%;
+    right : 0px;
+    top : 100px;
+    max-width : 900px;
+    padding-top : 30px;
+    padding-right : 20px;
+    padding-left : 20px;
+    padding-bottom : 30px;
+    margin-top : 50px;
+    margin-right : auto;
+    margin-left : auto;
+    margin-bottom : 30px;
+    background-color : white;
+    box-shadow : rgba(0, 0, 0, 0.25) 0px 3px 10px 0px;
+    color : black;
+    font-style : normal;
+    font-family : Arial;
+    font-stretch : normal;
+    font-variant-caps : normal;
+    font-variant-ligatures : normal;
+    font-variant-numeric : normal;
+    font-variant-east-asian : normal;
+    line-height : normal;
+    font-weight : 100;
+    opacity :0.3;
+    transition: top 0.5s, opacity 1s;
+
+    left:0%;
+    width: 99%;
+}
+
+.deco-teachdoc {
+    position: absolute;
+    top:0px;
+    right:0%;
+    left:0%;
+    height:54px;
+    background-color:#276D99;
+    overflow : visible;
+}
+
+.div-teachdoc-hide {
+    position: fixed;
+    top:0px;
+    bottom:0%;
+    left:-20px;
+    width:10px;
+    overflow: hidden;
+    background-color:#FAFAFA;
+    border-right: 1px solid #ccc;
+    visibility: hidden;
+    opacity : 0;
+}
+
+.div-teachdoc {
+    position: fixed;
+    top:0px;
+    bottom:0%;
+    left:0%;
+    width:24%;
+    background-color:#FAFAFA;
+    border-right: 1px solid #ccc;
+    opacity : 0.5;
+    transition: width 2s, height 2s, left 2s, top 2s,transform 2s;
+    /*opacity 1s, */
+}
+
+.div-teachdoc .logotop-teachdoc {
+    position : relative;
+    margin-top : 54px;
+    width:100%;
+    border : 1px solid #ccc;
+    background-color : white;
+}
+
+.div-teachdoc-full {
+    position: fixed;
+    top: 0px;
+    bottom: 0%;
+    left: 10%;
+    width: 80%;
+    background-color: #FAFAFA;
+    border-right: 0px solid #ccc;
+    opacity: 1;
+    transition: width 1s, height 1s, left 1s, top 1s, transform 1s;
+}
+
+.div-teachdoc-full .deco-teachdoc {
+    background-color: #313537;
+}
+
+.div-teachdoc-full .logotop-teachdoc {
+    position : relative;
+    top : 50%;
+    transform: translateY(-50%);
+    width : 44%;
+    margin-left : 4%;
+    border : 1px solid #ccc;
+    background-color : white;
+    transition: all 0.5s ease-out;
+}
+
+.div-teachdoc-full .title-mainmenu {
+    position : absolute;
+    top : 64px;
+    width : 44%;
+    left : 4%;
+    transition: all 0.5s ease-out;
+}
+
+.div-teachdoc .title-mainmenu {
+    display : none;
+}
+
+.title-mainmenu-core {
+    position : absolute;
+    bottom : 5px;
+    left : 5px;
+    right : 5px;
+    height : auto;
+    font-size: 32px;
+    text-align: center;
+}
+
+.div-teachdoc-transi {
+    position: fixed;
+    top:0px;
+    bottom:0%;
+    left:0%;
+    width:24%;
+    background-color:#FAFAFA;
+    border-right: 1px solid #ccc;
+    opacity : 1;
+    transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, transform 0.5s;
+}
+.div-teachdoc-transi .logotop-teachdoc {
+    position : relative;
+    top : 54px;
+    transform: translateY(0%);
+    width : 100%;
+    margin-left : 0%;
+    border : 1px solid #ccc;
+    background-color : white;
+    transition: all 0.5s ease-out;
+}
+
+.div-teachdoc-full  .btnlaunch-teachdoc {
+    position : absolute;
+    top : 50%;
+    left : 25%;
+    transform: translateY(-50%) translateX(-50%);
+    display : inline-block;
+    background : #fff;
+    font-size : 28px;
+    font-weight : 800;
+    line-height : 40px;
+    letter-spacing : .03em;
+    text-decoration : none;
+    transition : opacity .3s;
+    color : #313537;
+    border: 2px solid #313537;
+    padding : 0 1.5rem;
+    margin-right : 1.5rem;
+    border-radius : 2rem;
+    cursor : pointer;
+    -webkit-font-smoothing : antialiased;
+    text-transform : uppercase;
+}
+
+.NodeLvl1{
+    font-weight: bold;
+    font-size: 16px;
+    background-color:#E6E6E6;
+}
+.NodeLvl2{
+    font-size: 15px;
+    background-color:#F2F2F2;
+}
+.NodeLvl3{
+    font-size: 15px;
+    background-color:#F2F2F2;
+}
+.NodeLvl4{
+    font-size: 15px;
+    background-color:#F2F2F2;
+}
+
+.loadbarre{
+    height:15px;
+    margin:15px;
+    background:#EAECEE ;
+}
+
+.editRapidIcon{
+    position: absolute;
+    width:0px;
+    height:0px;
+    background-color:transparent;
+    opacity:0;
+}
+
+
+.div-teachdoc .progress-teachdoc{
+    position : relative;
+    width : 100%;
+    height : 70px;
+    border-bottom : 1px solid #ccc;
+    background-color : white;
+}
+
+.div-teachdoc-full .progress-teachdoc{
+    display : none;
+}
+
+.div-teachdoc .list-teachdoc_wrapper {
+    position: relative;
+    left: 0%;
+    right: 0px;
+    border-bottom : 1px solid #ccc;
+    overflow: auto;
+}
+
+.div-teachdoc-full .list-teachdoc_wrapper {
+    position: absolute;
+    top : 50%;
+    transform: translateY(-50%);
+    width : 44%;
+    min-height : 250px;
+    right: 4%;
+    border: 1px solid #313537;
+    overflow: auto;
+}
+.neoload{
+    overflow: hidden;
+}
+
+@media (max-width: 1200px){
+    .div-teachdoc-full {
+        left:2%;
+        width:96%;
+    }
+}
+@media (max-width: 1000px){
+    .div-teachdoc-full {
+        left:0%;
+        width:100%;
+    }
+    .div-teachdoc-full .logotop-teachdoc {
+        position : relative;
+        top : 10%;
+        transform: translateY(0%);
+        width : 84%;
+        margin-left : 0px;
+        margin-right : 0px;
+        left: 8%;
+        border : 1px solid #ccc;
+        background-color : white;
+        transition: all 0.5s ease-out;
+        z-index : 100;
+    }
+    .div-teachdoc-full .list-teachdoc_wrapper {
+        position: relative;
+        top : 11%;
+        transform: translateY(0%);
+        width : 84%;
+        margin-left : 0px;
+        margin-right : 0px;
+        min-height : 250px;
+        left: 8%;
+        border: 1px solid #313537;
+        overflow: auto;
+    }
+    .div-teachdoc-full  .btnlaunch-teachdoc {
+        position : absolute;
+        top : 140px;
+        left : 50%;
+        transform: translateY(-50%) translateX(-50%);
+        z-index : 151;
+    }
+    .div-teachdoc-full  .title-mainmenu {
+        position : absolute;
+        top : 54px;
+        width : 84%;
+        left : 8%;
+        z-index : 150;
+    }
+    .div-teachdoc-full  .title-mainmenu-core {
+        position : absolute;
+        bottom : auto;
+        top: 5px;
+        left : 5px;
+        right : 5px;
+        height : auto;
+        font-size: 18px;
+        text-align: center;
+    }
+    .neoload{
+        overflow:auto;
+    }
+}
+
+.list-teachdoc_wrapper::-webkit-scrollbar {
+    width: 8px; /* width of the entire scrollbar */
+}
+.list-teachdoc_wrapper::-webkit-scrollbar-track {
+    background: #E6E6E6; /* color of the tracking area */
+}
+.list-teachdoc_wrapper::-webkit-scrollbar-thumb {
+    background-color: #808B96 ; /* color of the scroll thumb */
+    border-radius: 2px; /* roundness of the scroll thumb */
+    border: 1px solid #E6E6E6; /* creates padding around scroll thumb */
+}
+
+
+.list-teachdoc {
+    position: relative;
+    left:0%;
+    right:0px;
+    font-size: 18px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: 1px solid #ccc;
+    background-color:white;
+}
+.list-teachdoc li {
+    text-align: left;
+    cursor:pointer;
+    padding-bottom: 0;
+    padding: 0.5em;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    border-top: 1px solid #ccc;
+}
+.list-teachdoc li:hover{
+    background-color:#E0E0F8;
+}
+
+.list-teachdoc li span{
+    /* display: inline-block; */
+    text-align: -webkit-match-parent;
+}
+.list-teachdoc .activeli{
+    background-color:#A9D0F5!important;
+}
+
+.list-teachdoc .badge {
+    background-color: #fff;
+    color:  #0B615E;
+    font-weight: bold;
+    font-size: 80%;
+    border-radius: 10em;
+    min-width: 1.5em;
+    padding: .25em;
+    text-align: center;
+    cursor:pointer;
+}
+.list-teachdoc .miniMenuLudi{
+    cursor:pointer;
+    width: 90%;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+
+
+
+.dotSubLudi{
+    height: 12px;
+    width: 12px;
+    margin: 0;
+    padding: 0;
+    margin-right : 15px;
+    border: solid  0px rgb(102, 85, 85);
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.teachdocbtn{
+    width : 100%;
+    text-align : center;
+}
+.teachdocbtn td{
+    width : 100%;
+    text-align : center;
+    padding : 10px;
+}
+
+.btn-btnTeach{
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.teachdocbtnteach{
+    width : 100%;
+}
+.teachdocbtnteach td{
+    width : 100%;
+    text-align : center;
+    padding : 10px;
+}
+
+/*
+    Ludi Nav TeachDoc
+*/
+.left-text-progress{
+    position : absolute;
+    text-align : center;
+    font-size : 18px;
+    font-weight: bold;
+    color : #5D6D7E;
+    top : 38px;
+    left : 10%;
+    width : 80%;
+    height : 24px;
+}
+.left-teach-progress{
+	position: absolute;
+	top : 12px;
+	left : 10%;
+	width : 80%;
+	height : 16px;
+	border-radius : 13px;
+    border: solid 1px #E5E8E8;
+    background-color : #E5E8E8;
+	overflow : hidden;
+}
+.left-barre-progress{
+	position: absolute;
+	top : 0px;
+	left : 0px;
+	width : 10%;
+	height : 18px;
+	background-color: #85929E;
+}
+
+.span-ludi-progress{
+	position: absolute;
+	top : 18px;
+	left : 30%;
+	width : 40%;
+    height : 16px;
+    display : none;
+	border-radius : 8px;
+	border : solid 1px #839192;
+	overflow : hidden;
+}
+.barre-ludi-progress{
+	position: absolute;
+	top : 0px;
+	left : 0px;
+	width : 1%;
+	height : 26px;
+	background-color: #086A87;
+}
+
+
+/*Top NAV */
+.fixed-top-nav {
+    z-index: 1000;
+	background-color: #343a40!important;
+    opacity : 0.5;
+    transition: opacity 0.5s;
+}
+
+.fixed-top-nav-classic {
+    position: fixed;
+    right: 0;
+    top: 0;
+    left: 24%;
+	height: 54px;
+}
+.fixed-top-nav-large {
+    position: fixed;
+    right: 0;
+    top: 0;
+    left: 0%;
+	height: 54px;
+}
+
+.fixed-top-nav-load {
+    position: fixed;
+    right: 0;
+    top: 0;
+    left: 0%;
+    background-color: #343a40!important;
+	height: 54px;
+}
+
+.vertical-line-load {
+    position: fixed;
+    left: 103px;
+    bottom: -55px;
+    width: 10px;
+    height: 388px;
+    background-color: #086A87;
+    transform: rotate(-40deg);
+}
+
+.vertical-line-load-2 {
+    position: fixed;
+    left: 50px;
+    bottom: -44px;
+    width: 4px;
+    height: 300px;
+    background-color: #086A87;
+    transform: rotate(-40deg);
+}
+
+.loadcontentfram {
+    position: absolute;
+    background-color: #ffffff!important;
+    background-image: url("../img/classique/linear-progressbar.gif");
+    background-position: center center;
+    background-repeat: no-repeat;
+    border: dashed 1px #ccc!important;
+    top : 0px;
+    left : 0px;
+    width: 100%;
+	height: 100%;
+}
+
+#btn-next{
+	right:30px;
+}
+#btn-prev{
+	right:85px;
+}
+.btn{
+    position: absolute;
+	top:8px;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: .20rem;
+    transition: color .20s ease-in-out,background-color .20s ease-in-out,border-color .20s ease-in-out,box-shadow .20s ease-in-out;
+	color: #f8f9fa;
+	background-color: transparent;
+	border: solid 1px #f8f9fa;
+	 -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+	cursor:pointer;
+}
+.btn:hover{
+	background-color: #f8f9fa;
+	color: #343a40;
+}
+
+.qcmbarre{
+    text-align: left;
+    width:100%;
+}
+.quizzTextqcm{
+    text-align: left;
+}
+
+.ui-life-bar{
+    position: fixed;
+    top : 90px;
+    right : 0px;
+    width : 36px;
+    min-height : 32px;
+    padding : 3px;
+    padding-top:12px;
+    padding-bottom : 0px;
+    border-radius : 18px;;
+    background-color: #f8f9fa;
+    border: solid 1px rgb(97, 96, 97);
+    transition: height 1s ease;
+}
+
+.onelifeopt {
+    margin-top:-6px
+}
+
+#linkdatafile {
+    display : none;
+    background-color: #E5E8E8 ;
+    color: #E5E8E8 ;
+}
+
+.errorflag {
+    position : relative;
+    margin-left : 5px;
+    width : 40px;
+    text-align : center;
+    background-color : #CD6155;
+    border: 1px solid #d43f3a;
+    color : #ffffff;
+    display : inline-block;
+    border-radius: 5px;
+    padding : 0.5em;
+    line-height : 1;
+}
+
+.fixed-top-message {
+    position : fixed;
+    top : 70px;
+    right : 0px;
+    text-align : center;
+    color :white;
+    display: none;
+    font-size: 20px;
+    max-height : 300px;
+    min-height : 40px;
+    line-height : 20px;
+    padding : 20px;
+    z-index : 1000;
+    border-radius: 4px;
+	background-color:#CD6155!important;
+    border: 1px solid #d43f3a;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+       -khtml-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+}
+
+.agloss {
+    position: relative;
+    border-bottom: dotted 0.5px gray;
+    cursor: pointer;
+}
+.aglossclose {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width : 10px;
+    height : 10px;
+    background-image: url("../img/classique/close.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.toolsGloss {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-top: 14px;
+    margin-bottom: 0px;
+}
+.addGloss {
+    display: inline-block;
+    border: solid 1px #45B39D;
+    color: #45B39D;
+    width: 20px;
+    text-align: center;
+    font-size: 20px;
+    height: 22px;
+    line-height: 20px;
+}
+
+.bubblegloss {
+	position: absolute;
+	width: 300px;
+    margin-left: -140px;
+    top : 38px;left : 0px;
+	background-color: #fff;
+	padding: 12px;
+    padding-top: 17px;
+    padding-bottom: 15px;
+    font-size: 17px;
+	border-radius: 10px;
+	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3);
+    z-index: 60;
+    display : none;
+}
+
+.glossdef2 {
+    display : none;
+}
+
+.bubblegloss p {
+    padding-top: 5px;
+    margin-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+}
+.bubblegloss:before {
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	bottom: 100%;
+	left: 145px;
+	border: 0.75rem solid transparent;
+	border-top: none;
+	border-bottom-color: #fff;
+	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.2));
+}
+
+
+@media (max-width: 800px){
+    .cell {
+        min-width : 300px;
+        width : 100%;
+        display: block;
+        height : auto;
+    }
+}
+@media screen and (max-width:600px){
+    .fixed-top-message{
+        left:0%;
+    }
+    .fixed-top-nav {
+        left:0%;
+    }
+	.span-ludi-progress{
+        left : 27%;
+        width : 40%;
+        display : block;
+	}
+}
+@media screen and (max-width:500px){
+    .span-ludi-progress{
+        left : 25%;
+        width : 40%;
+        display : block;
+	}
+}
+@media screen and (max-width:400px){
+    .span-ludi-progress{
+        left : 20%;
+        width : 40%;
+        display : block;
+	}
+}
+@media screen and (max-width:350px){
+    .span-ludi-progress{
+        left : 10%;
+        width : 40%;
+        display : block;
+	}
+}
+@media screen and (min-width: 900px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:0%;
+        width:30%;
+    }
+    .panel-teachdoc{
+        left:30%;
+        width: 70%;
+    }
+    .fixed-top-nav-classic {
+        left:30%!important;
+    }
+}
+@media screen and (min-width: 1200px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:0%;
+        width:22%;
+    }
+    .panel-teachdoc{
+        left:22%;
+        width:78%;
+    }
+    .fixed-top-nav-classic {
+        left:22%!important;
+    }
+}
+@media screen and (min-width: 1300px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:0%;
+        width:21%;
+    }
+    .panel-teachdoc{
+        left:21%;
+        width:79%;
+    }
+    .fixed-top-nav-classic {
+        left:21%!important;
+    }
+}
+@media screen and (min-width: 1400px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:0%;
+        width:18%;
+    }
+    .panel-teachdoc{
+        left:18%;
+        width:82%;
+    }
+    .fixed-top-nav-classic {
+        left:18%!important;
+    }
+}
+@media screen and (max-width: 900px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:0%;
+        width:30%;
+    }
+    .panel-teachdoc{
+        left:30%;
+        width: 70%;
+    }
+    .fixed-top-nav-classic {
+        left:30%!important;
+    }
+}
+@media screen and (max-width: 800px){
+    .div-teachdoc, .div-teachdoc-transi{
+        left:-24%;
+        width:24%;
+    }
+    .panel-teachdoc{
+        left:0%;
+        width: 99%;
+    }
+    .fixed-top-nav-classic {
+        left:0%!important;
+    }
+}

sco125cs80_watcha/gloss.js

@@ -0,0 +1 @@
+var glossaryRender = new Array();

sco125cs80_watcha/img/classique/arrow-collapse-small.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="18"
+   viewBox="0 0 18 18"
+   width="18"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="arrow-collapse-small.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   inkscape:export-filename="D:\wamp64\www\chamilo-1.11.16\plugin\adv_oel_tools_teachdoc\editor\img\classique\arrow-collapsel.png"
+   inkscape:export-xdpi="128"
+   inkscape:export-ydpi="128">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="30.747438"
+     inkscape:cx="8.3843866"
+     inkscape:cy="9.8526541"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="m13.7 6.3c-.2-.2-.4-.3-.7-.3h-8c-.3 0-.5.1-.7.3-.4.4-.4 1 0 1.4l4 4c.2.2.4.3.7.3s.5-.1.7-.3l4-4c.4-.4.4-1 0-1.4z"
+     fill="#494c4e"
+     id="path2"
+     style="fill:#cccccc" />
+</svg>

sco125cs80_watcha/img/classique/check-circle.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="16"
+   viewBox="0 0 16 16"
+   width="16"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="check-circle.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   class="fillcoloroel">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="18.491553"
+     inkscape:cx="17.479803"
+     inkscape:cy="15.845263"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6"
+     inkscape:document-rotation="0" />
+  <path
+     d="m 7.9292955,1.9828379 c -3.8546437,0 -6.98304997,3.0888692 -6.98304997,6.8947976 0,3.8059285 3.12840627,6.8947985 6.98304997,6.8947985 3.8546425,0 6.9830485,-3.08887 6.9830485,-6.8947985 0,-3.8059284 -3.128406,-6.8947976 -6.9830485,-6.8947976 z M 6.5326856,12.325035 3.0411605,8.8776355 4.0257706,7.9054688 6.5326856,10.373807 11.832821,5.140655 12.81743,6.1197163 Z"
+     id="path4"
+     style="stroke-width:0.693878;fill:#808080" />
+</svg>

sco125cs80_watcha/img/classique/cursor.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 72 72"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="cursor.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   inkscape:export-filename="D:\wamp64\www\chamilo-1.11.16\plugin\adv_oel_tools_teachdoc\editor\img\classique\rendcursor.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="4.0928708"
+     inkscape:cx="30.875394"
+     inkscape:cy="2.7211772"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8"
+     inkscape:document-rotation="0" />
+  <path
+     d="M 54.900286,60.147552 42.248374,69.321207 29.517831,52.444742 15.701406,62.466009 1.7567326,1.6993066 57.631155,32.057327 42.16639,43.270485 Z"
+     fill="#ffffff"
+     id="path2"
+     style="stroke-width:1.33751" />
+  <path
+     d="M 46.951908,40.567942 57.637117,32.057329 1.7626946,1.6993082 Z"
+     fill="#d0cfce"
+     id="path4"
+     style="stroke-width:1.33751" />
+  <path
+     d="M 1.7262703,1.7021916 57.678967,32.042228 42.188112,43.261382 54.9317,60.134849 42.253696,69.3145 29.510107,52.441031 15.667591,62.468292 Z"
+     fill="none"
+     stroke="#000000"
+     stroke-linejoin="round"
+     stroke-width="2.67502"
+     id="path6" />
+</svg>

sco125cs80_watcha/img/classique/point-circle.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80"
+   height="80"
+   viewBox="0 0 80 80"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="point-circle.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="8.3544669"
+     inkscape:cx="62.723302"
+     inkscape:cy="38.285531"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6"
+     inkscape:document-rotation="0" />
+  <g
+     id="sinewave-loader"
+     fill="none"
+     fill-rule="evenodd"
+     stroke="#f1948a"
+     transform="matrix(1.3991265,0,0,1.4044764,-15.965057,-16.085753)"
+     style="stroke-width:2.64089236;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;opacity:1">
+    <path
+       id="loader-circle"
+       d="M 40,64.5 C 26.4909,64.5 15.5,53.5091 15.5,40 M 40,15.5 c 13.5091,0 24.5,10.9909 24.5,24.5"
+       stroke-dasharray="314 314"
+       stroke-dashoffset="314"
+       stroke-width="1"
+       style="stroke-width:2.64089236;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round"
+       sodipodi:nodetypes="cccc" />
+  </g>
+  <circle
+     style="opacity:0.4399093;fill:#008080;stroke-width:1.15841;stroke-linecap:round;stroke-linejoin:round"
+     id="path837"
+     cx="40"
+     cy="40"
+     r="20" />
+</svg>

sco125cs80_watcha/img/classique/pointing-left.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg32"
+   sodipodi:docname="pointing-left.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   inkscape:export-filename="D:\wamp64\www\chamilo-1.11.16\plugin\adv_oel_tools_teachdoc\editor\img\classique\pointing-left.png"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <metadata
+     id="metadata38">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs36" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview34"
+     showgrid="false"
+     inkscape:zoom="3.2558588"
+     inkscape:cx="48.164245"
+     inkscape:cy="72.113275"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg32"
+     inkscape:document-rotation="0" />
+  <g
+     transform="rotate(-90,37.39669,37.39669)"
+     id="g30">
+    <g
+       fill="#ffdd67"
+       id="g6">
+      <path
+         d="m 44.8,34.5 c 0,0 -31.9,-2.5 -31.4,2.1 0,0 -1.6,11.2 2.3,18 5.9,10.1 28.6,11.7 34.3,-7 1.2,-3.7 0.3,-13.7 -5.2,-13.1"
+         id="path2" />
+      <path
+         d="m 38.7,39.1 c 0,2.3 1.9,4.2 4.2,4.2 2.3,0 4.2,-1.9 4.2,-4.2 V 6.2 C 47.1,3.9 45.2,2 42.9,2 40.6,2 38.7,3.9 38.7,6.2 Z"
+         id="path4" />
+    </g>
+    <path
+       d="m 41,42.3 c 2.4,0 4.3,-1.9 4.3,-4.2 V 5.2 c 0,-1.2 -0.6,-2.4 -1.4,-3.1 1.9,0.4 3.4,2.1 3.4,4.1 v 32.9 c 0,2.3 -1.9,4.2 -4.2,4.2 -1.1,0 -2,-0.4 -2.8,-1 z"
+       fill="#eba352"
+       id="path8" />
+    <g
+       fill="#ffdd67"
+       id="g14">
+      <path
+         d="m 13.4,30 c 0,-2.4 1.9,-4.3 4.2,-4.3 h 0.1 c 2.3,0 4.2,1.9 4.2,4.3 v 6.6 c 0,2.4 -1.9,4.3 -4.2,4.3 h -0.1 c -2.3,0 -4.2,-1.9 -4.2,-4.3 z"
+         id="path10" />
+      <path
+         d="m 21.9,26.2 c 0,-2.4 1.9,-4.3 4.2,-4.3 h 0.1 c 2.3,0 4.2,1.9 4.2,4.3 v 6.6 c 0,2.4 -1.9,4.3 -4.2,4.3 h -0.1 c -2.3,0 -4.2,-1.9 -4.2,-4.3 z m 8.5,-0.5 c 0,-2.4 1.9,-4.3 4.2,-4.3 h 0.1 c 2.3,0 4.2,1.9 4.2,4.3 v 6.6 c 0,2.4 -1.9,4.3 -4.2,4.3 h -0.1 c -2.3,0 -4.2,-1.9 -4.2,-4.3 z"
+         id="path12" />
+    </g>
+    <g
+       fill="#eba352"
+       id="g20">
+      <path
+         d="m 16.5,39.3 c 2.4,0 4.2,-1.9 4.2,-4.2 v -6.6 c 0,-0.6 -0.1,-1.2 -0.4,-1.8 1,0.8 1.7,2 1.7,3.4 v 6.6 c 0,2.4 -1.8,4.2 -4.2,4.2 h -0.1 c -1.7,0 -3.2,-1 -3.8,-2.5 0.7,0.6 1.6,0.9 2.6,0.9 m 8.4,-3.8 c 2.4,0 4.2,-1.9 4.2,-4.2 v -6.6 c 0,-0.6 -0.1,-1.2 -0.4,-1.8 1,0.8 1.7,2 1.7,3.4 v 6.6 c 0,2.4 -1.9,4.2 -4.2,4.2 h -0.1 c -1.7,0 -3.2,-1 -3.8,-2.5 0.7,0.6 1.6,0.9 2.6,0.9 M 33.3,35 c 2.4,0 4.2,-1.9 4.2,-4.2 v -6.6 c 0,-0.6 -0.1,-1.2 -0.4,-1.8 1,0.8 1.7,2 1.7,3.4 v 6.6 c 0,2.4 -1.9,4.2 -4.2,4.2 h -0.1 c -1.7,0 -3.2,-1 -3.8,-2.5 0.8,0.6 1.7,0.9 2.6,0.9 M 41,40.8 C 36.2,38.5 25.3,42.5 27.5,52.5 27.5,42.1 36.9,40.3 41,40.8"
+         id="path16" />
+      <path
+         d="m 39.2,30.5 c -3.5,-2.1 -4.1,1.2 -10,1.4 -2.6,0.1 -3.7,5.4 0.2,7.3 5.4,2.7 5.8,-1.1 7.2,0.4 1.4,1.6 2.7,1.9 3.9,3.7 0.9,1.3 7.6,-0.7 8.3,-3.4 1.3,-5.3 -4.1,-6.1 -9.6,-9.4"
+         id="path18" />
+    </g>
+    <path
+       d="m 39.6,31.4 c -3.6,-2.1 -4.3,1.2 -10.4,1.4 -2.7,0.1 -3.9,5.6 0.2,7.6 5.6,2.8 6.1,-1.2 7.4,0.4 1.5,1.6 2.8,2 4.1,3.9 0.9,1.4 -1.5,6.6 -1.5,6.6 0,0 6.9,4.9 8.3,2.1 2.6,-5.2 1.9,-9.2 1.8,-12.2 -0.2,-7.1 -4.2,-6.4 -9.9,-9.8"
+       fill="#ffdd67"
+       id="path22" />
+    <g
+       fill="#eba352"
+       id="g28">
+      <path
+         d="m 46.6,34.9 c 3.8,1.8 3.6,11.7 0.8,16.5 -7.1,11.9 -22.7,11.7 -30,5.3 6.8,7.3 23.4,8 31.1,-4.3 3,-4.9 4,-16.3 -1.9,-17.5"
+         id="path24" />
+      <path
+         d="m 40.1,44.8 c 0.3,0.4 0.2,1.2 0.1,2.1 0.4,-1.4 0.7,-2.8 0.3,-3.4 -1.2,-1.9 -1.9,-2.3 -3.4,-3.9 -1.4,-1.5 -1.8,2.4 -7.4,-0.4 -2.1,-1 -2.8,-3 -2.6,-4.7 -0.8,1.8 -0.4,4.6 2.3,6 5.6,2.8 6.1,-1.2 7.4,0.4 1.4,1.6 2.1,2 3.3,3.9"
+         id="path26" />
+    </g>
+  </g>
+</svg>

sco125cs80_watcha/img/classique/white-medium-star.svg

@@ -0,0 +1,197 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 700 200"
+   xml:space="preserve"
+   sodipodi:docname="white-medium-star.svg"
+   width="700"
+   height="200"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+   id="metadata19"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs17" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1545"
+   inkscape:window-height="803"
+   id="namedview15"
+   showgrid="false"
+   inkscape:zoom="0.79324518"
+   inkscape:cx="318.89398"
+   inkscape:cy="104.70279"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Layer_1" />
+
+  <style
+     id="style2">
+	#star1{
+      position : absolute;
+		animation-name: rotationckw;
+		animation-duration: 16s;
+		animation-iteration-count: infinite;
+		transform-origin: 75px 75px ;
+	}
+   #star2{
+		animation-name: rotationckw;
+		animation-duration: 16s;
+		animation-iteration-count: infinite;
+		transform-origin: 75px 75px ;
+		display: inline-block;
+	}
+   #star3{
+		animation-name: rotationckw;
+		animation-duration: 16s;
+		animation-iteration-count: infinite;
+		transform-origin: 75px 75px ;
+		display: inline-block;
+	}
+
+   @keyframes rotationckw {
+		0% {
+			transform : scale(0.2) rotate(0deg);
+		}
+      8% {
+			transform : scale(0.8) rotate(360deg);
+		}
+      10% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      12% {
+			transform : scale(1) rotate(360deg);
+		}
+      14% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      20% {
+			transform : scale(1) rotate(355deg);
+		}
+      30% {
+			transform : scale(1) rotate(365deg);
+		}
+      32% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      34% {
+			transform : scale(1) rotate(360deg);
+		}
+      36% {
+			transform : scale(1.1) rotate(360deg);
+		}
+
+      42% {
+			transform : scale(1) rotate(360deg);
+		}
+      44% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      46% {
+			transform : scale(1) rotate(360deg);
+		}
+
+      52% {
+			transform : scale(1) rotate(360deg);
+		}
+      54% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      56% {
+			transform : scale(1) rotate(360deg);
+		}
+
+      72% {
+			transform : scale(1) rotate(360deg);
+		}
+      74% {
+			transform : scale(1.1) rotate(360deg);
+		}
+      76% {
+			transform : scale(1) rotate(360deg);
+		}
+
+      99% {
+			transform : scale(0.9) rotate(360deg);
+		}
+		100% {
+			transform : scale(0.2) rotate(0deg);
+		}
+	}
+
+   </style>
+<g transform="translate(284,10)">
+   <g id="star1" >
+      <path
+      style="fill:#fdd835"
+      d="m 68.05,7.23 13.46,30.7 c 1.03,2.35 3.26,3.96 5.82,4.19 l 32.79,2.94 c 3.71,0.54 5.19,5.09 2.5,7.71 l -24.7,20.75 c -2,1.68 -2.91,4.32 -2.36,6.87 l 7.18,33.61 c 0.63,3.69 -3.24,6.51 -6.56,4.76 L 67.56,102 c -2.2,-1.29 -4.92,-1.29 -7.12,0 l -28.62,16.75 c -3.31,1.74 -7.19,-1.07 -6.56,-4.76 l 7.18,-33.61 c 0.54,-2.55 -0.36,-5.19 -2.36,-6.87 L 5.37,52.78 c -2.68,-2.61 -1.2,-7.17 2.5,-7.71 l 32.79,-2.94 c 2.56,-0.23 4.79,-1.84 5.82,-4.19 L 59.94,7.24 c 1.67,-3.36 6.45,-3.36 8.11,-0.01 z"
+      id="path2" />
+      <g
+      id="g6">
+         <path
+      style="fill:#ffff8d"
+      d="M 67.07,39.77 64.79,17.15 c -0.09,-1.26 -0.35,-3.42 1.67,-3.42 1.6,0 2.47,3.33 2.47,3.33 l 6.84,18.16 c 2.58,6.91 1.52,9.28 -0.97,10.68 -2.86,1.6 -7.08,0.35 -7.73,-6.13 z"
+      id="path4" />
+      </g>
+      <g
+      id="g10">
+         <path
+      style="fill:#f4b400"
+      d="M 95.28,71.51 114.9,56.2 c 0.97,-0.81 2.72,-2.1 1.32,-3.57 -1.11,-1.16 -4.11,0.51 -4.11,0.51 l -17.17,6.71 c -5.12,1.77 -8.52,4.39 -8.82,7.69 -0.39,4.4 3.56,7.79 9.16,3.97 z"
+      id="path8" />
+      </g>
+   </g>
+</g>
+
+<g transform="translate(159.74553,47.63799)">
+
+<g id="star2" >
+   <path
+     style="fill:#fdd835"
+     d="m 68.05,7.23 13.46,30.7 c 1.03,2.35 3.26,3.96 5.82,4.19 l 32.79,2.94 c 3.71,0.54 5.19,5.09 2.5,7.71 l -24.7,20.75 c -2,1.68 -2.91,4.32 -2.36,6.87 l 7.18,33.61 c 0.63,3.69 -3.24,6.51 -6.56,4.76 L 67.56,102 c -2.2,-1.29 -4.92,-1.29 -7.12,0 l -28.62,16.75 c -3.31,1.74 -7.19,-1.07 -6.56,-4.76 l 7.18,-33.61 c 0.54,-2.55 -0.36,-5.19 -2.36,-6.87 L 5.37,52.78 c -2.68,-2.61 -1.2,-7.17 2.5,-7.71 l 32.79,-2.94 c 2.56,-0.23 4.79,-1.84 5.82,-4.19 L 59.94,7.24 c 1.67,-3.36 6.45,-3.36 8.11,-0.01 z"
+     id="path2-3" /><g
+     id="g6-1"><path
+       style="fill:#ffff8d"
+       d="M 67.07,39.77 64.79,17.15 c -0.09,-1.26 -0.35,-3.42 1.67,-3.42 1.6,0 2.47,3.33 2.47,3.33 l 6.84,18.16 c 2.58,6.91 1.52,9.28 -0.97,10.68 -2.86,1.6 -7.08,0.35 -7.73,-6.13 z"
+       id="path4-0" /></g><g
+     id="g10-0"><path
+       style="fill:#f4b400"
+       d="M 95.28,71.51 114.9,56.2 c 0.97,-0.81 2.72,-2.1 1.32,-3.57 -1.11,-1.16 -4.11,0.51 -4.11,0.51 l -17.17,6.71 c -5.12,1.77 -8.52,4.39 -8.82,7.69 -0.39,4.4 3.56,7.79 9.16,3.97 z"
+       id="path8-5" /></g>
+   </g>
+</g>
+
+<g transform="translate(416.25535,47.529844)">
+   <g id="star3" >
+      <path
+      style="fill:#fdd835"
+      d="m 68.05,7.23 13.46,30.7 c 1.03,2.35 3.26,3.96 5.82,4.19 l 32.79,2.94 c 3.71,0.54 5.19,5.09 2.5,7.71 l -24.7,20.75 c -2,1.68 -2.91,4.32 -2.36,6.87 l 7.18,33.61 c 0.63,3.69 -3.24,6.51 -6.56,4.76 L 67.56,102 c -2.2,-1.29 -4.92,-1.29 -7.12,0 l -28.62,16.75 c -3.31,1.74 -7.19,-1.07 -6.56,-4.76 l 7.18,-33.61 c 0.54,-2.55 -0.36,-5.19 -2.36,-6.87 L 5.37,52.78 c -2.68,-2.61 -1.2,-7.17 2.5,-7.71 l 32.79,-2.94 c 2.56,-0.23 4.79,-1.84 5.82,-4.19 L 59.94,7.24 c 1.67,-3.36 6.45,-3.36 8.11,-0.01 z"
+      id="path2-3-2" /><g
+      id="g6-1-6"><path
+         style="fill:#ffff8d"
+         d="M 67.07,39.77 64.79,17.15 c -0.09,-1.26 -0.35,-3.42 1.67,-3.42 1.6,0 2.47,3.33 2.47,3.33 l 6.84,18.16 c 2.58,6.91 1.52,9.28 -0.97,10.68 -2.86,1.6 -7.08,0.35 -7.73,-6.13 z"
+         id="path4-0-8" /></g><g
+      id="g10-0-1"><path
+         style="fill:#f4b400"
+         d="M 95.28,71.51 114.9,56.2 c 0.97,-0.81 2.72,-2.1 1.32,-3.57 -1.11,-1.16 -4.11,0.51 -4.11,0.51 l -17.17,6.71 c -5.12,1.77 -8.52,4.39 -8.82,7.69 -0.39,4.4 3.56,7.79 9.16,3.97 z"
+         id="path8-5-9" />
+      </g>
+   </g>
+</g>
+</svg>