Adding an e-learning module in iframe – as a pop up
- Upload the e-learning module (must be exported from the initial authoring tool in CD-Rom format) file to the Amazon Bucket then retrieve the URL link
- Create a background image with a Player
- Go to the studio, upload the image then go into the chosen unit
- Incorporate a text or HTML component
- Add the following code. The elements highlighted in blue can be customized
- the width and the height, though we recommended that it be left unchanged
- the background image of the Player (created in step 2)
- the url address of the e-learning module hosted on the ftp
<p></p>
<style><!--
<span id="__caret">_</span><!--
h1{
text-align: center;
}
#modalCheck{
display: none;
}
.modalLayer{
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000000;
}
#modalCheck:checked + .modalLayer, #modalContent:target{
display: block;
}
.popup_block{
background: #fff;
padding: 0px;
border: 1px solid #ddd;
position: relative;
margin: 2% auto;
width: 80%;
height: 95vh;
box-shadow: 0px 0px 10px #000;
border-radius: 4px;
z-index: 1000001;
}
img.btn_close {
float: right;
margin: -20px -20px 0 0;
cursor: pointer;
}
.button{
cursor: pointer;
color: blue;
text-decoration: underline;
}
--></style>
<script>// <![CDATA[
$('.open-modal').click(function() {
$('#uniqueiframe').attr('src', $('#uniqueiframe').data('src'));
});
$('.btn_close').click(function() {
$('#uniqueiframe').attr('src', 'about:blank');
});
// ]]></script>
<div><a href="#modalContent"> <img src="/static/loi-lagarde.png" class="open-modal" alt="" type="saveimage" target="[object Object]" preventdefault="function (){r.isDefaultPrevented=n}" stoppropagation="function (){r.isPropagationStopped=n}" stopimmediatepropagation="function (){r.isImmediatePropagationStopped=n}" isdefaultprevented="function t(){return!1}" ispropagationstopped="function t(){return!1}" isimmediatepropagationstopped="function t(){return!1}" /></a>
<div class="modalLayer" id="modalContent">
<div class="popup_block"><a href="#noWhere"><img alt="X" title="Fermer" class="btn_close" src="https://d3akuz1z2rpl4k.cloudfront.net/close_pop.png" /></a> <iframe id="uniqueiframe" data-src="https://d3akuz1z2rpl4k.cloudfront.net/Cofidis/je_decouvre_cofidis/loi-lagarde-2016/SCO_0001/default.htm" src="about:blank" scrolling="no" frameborder="1" height="100%" width="100%"></iframe></div>
</div>
</div>
�Note: example of the i-frame created for one of our client:
Adding an e-learning module in iframe – as a new window
- Upload the e-learning module (must be exported from the initial authoring tool in CD-Rom format) file to the Amazon Bucket then retrieve the URL link
- Create a background image with a Player
- Go to the studio, upload the image then go into the chosen unit
- Incorporate a text or HTML component
- Add the following code. The elements highlighted in blue can be customized
- the width and the height, though we recommended that it be left unchanged
- the background image of the Player (created in step 2)
- the url address of the e-learning module hosted on the ftp
<p><a href="https://s3-eu-west-1.amazonaws.com/videofrance/BT-E-training-ecoutdecouvr-scorm2004-V4/SCO_0001/default.htm" target="_blank"><img src="/static/Capture.PNG" alt="" type="saveimage" target="[object Object]" preventdefault="function (){r.isDefaultPrevented=n}" stoppropagation="function (){r.isPropagationStopped=n}" stopimmediatepropagation="function (){r.isImmediatePropagationStopped=n}" isdefaultprevented="function t(){return!1}" ispropagationstopped="function t(){return!1}" isimmediatepropagationstopped="function t(){return!1}" width="1265" /></a></p>
<p></p>
�Note: example of the i-frame created for Bouygues:
<!>Be careful because with this option the link can be shared with anyone anywhere.