Adding an e-learning module in iframe – as a pop up

  1. 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
  2. Create a background image with a Player
  3. Go to the studio, upload the image then go into the chosen unit
  4. Incorporate a text or HTML component
  5. 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

  1. 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
  2. Create a background image with a Player
  3. Go to the studio, upload the image then go into the chosen unit
  4. Incorporate a text or HTML component
  5. 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.

Login to leave your feedback!

Leave a Reply

You must be logged in to post a comment.