I wasn’t in that webinar, but I know you can take h5p interactive content, package it for SCORM, and then import it into Docebo.

Let’s say you created something like these flashcards: https://h5p.org/flashcards

In the lower left corner is a “Reuse” link. Use that to download a .h5p file.  To package that as SCORM 1.2, upload the .h5p file here: https://translate-h5p.tk/scorm-h5p/ and click the Package button to create and download a SCORM (zip) package.  Upload the zip file into Docebo.  Example attached.

Ed

P.S. If you only want to put the content in an iframe and don’t need tracking in Docebo, use the “Embed” link instead of “Reuse”.

Hey there @np11 So the code your talking about was presented in this Docebo Inspire event -- you can find recording here: https://university.docebo.com/share/asset/view/250

So for some reason, I am getting an error message when I try to attach the pdf here with the code snippets. I’ll have to check with someone on that so I am going to try to share it as google link: https://drive.google.com/file/d/1TDi7mAb6jgReu18hqJ7b0gQM_JIyTMIz/view?usp=sharing

Let me know if that works.  

Hi @elamast , thank you for your reply.  This was for the homepage to make it more interactive, not a SCORM course itself.  Sorry for the confusion.  As @Cindy McElhinney mentioned above, there is a recording of it, and from there, I have located the email with the link to the HTML/CSS instructions!

There it is!  Thanks @Cindy McElhinney! I have located the email now and got the link to the document (I can’t access file sharing in my firm.  The link for anyone else that may be interested is: Road To Inspire 2020 - Building a tailored learning experience - HTML&CSS TechDoc.pdf (hubspotusercontent00.net)

This is fantastic and would be great in that HTML Group we are voting to get @Adam Ballhaussen !;)

I tinkered around with the flipcards and they look awesome.  However, I have not put any of them in place on our live pages yet because I ran into an issue with older version of Edge.  The flipcards were not displaying correctly in Edge, but they did work correctly for those that have upgrade to the “new Edge.”  Firefox and Chrome browsers so far seem to work well.  Has anyone else seen issues with some browsers and these flipcards?  I’m hoping down the road that enough people will have gotten the updated version of Edge that we can finally put these to use.  Thanks to Docebo for sharing this cool idea!

@sjennings78  - I couldnt get those flip cards to work - I did a pure copy and paste of the code from inspire and instead I got a hot mess of a flip card instead. Would love to pick your brain on it.

@dklinger - I copied their code and made a few changes to create what I wanted.  It looks fine in Firefox, Chrome, and Edge on my pc, but I had a few others test it and those that had the older version of Edge had a hot mess display.

I made a simple card with an image on the front as a background and a question, with the answer on the back (flip-side) with just a solid color as the background.  The navy blue with the word “FAQS” on it is an image file I used as the background on the front of the card.

Front:

Back:

To do this, I added this code to the CSS overrides in the Branding area under Admin:

/*CUSTOM FLIPCARD - START*/
#custom_flipcard {height: 100%; transform-style: preserve-3d; perspective: 600px; transition: 0.5s; 
overflow: hidden;}
#custom_flipcard:hover .card-front {transform: rotateY(-180deg);} #custom_flipcard:hover .card-back 
{transform: rotateY(0deg);}
.card-front {height: 100%; width: 100%; background-position: 50% 50%; background-size: cover; 
position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.5s; }
.card-back {height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: 
#ffffff; backface-visibility: hidden; transform: rotateY(180deg); transition: 0.5s; color: #ffffff; 
text-align: center; margin: 0; display: flex; justify-content: center;
align-items: center;}
.card_back_text a {padding: 8px 16px; border-radius: 2px; line-height: 20px; font-size: 14px; 
font-weight: 700; color: #ffffff; background: #64A70B; text-transform: uppercase;
text-decoration: none;}
.card_back_text a:hover { color: #ffffff; background-color: #AB2328;}
.card_front_title {font-size: 25px; line-height: 34px; font-weight: 700; color:#ffffff; text-align: 
center; margin: 75px 25px 25px 25px; z-index: 1;}
.card_back_text {font-size: 16px;line-height: 22px; font-weight: 600; text-align: center; 
margin:25px; color:#ffffff;}
.flipcard_overlay {width:100%;height:100%; display: flex; justify-content: center; align-items: 
center;}
/*CUSTOM FLIPCARD - END*/

Then used this code in an HTML widget on a page:

(I removed the URLs that that would display our full location for the items where I put “REPLACE THIS WITH...” in the snippets below for security reasons.  We store most of our images and documents on our own webserver)

<div id = "custom_flipcard">
<div class = "card-front" style = "background-image:
url(REPLACE THIS WITH WHERE I HAVE MY BACKGROUND IMAGE STORED ON OUR WEBSERVER);">
<!--<div class = "flipcard_overlay" style= "background: rgba(224, 25, 51, 0.3)">-->
<div class = "card_front_title" >How do I view times based on my local timezone?</div>
<!--</div>-->
</div>
<div class = "card-back" style = "background: #0074bc">
<div class = "card_back_text">Select the <strong>Main Menu icon</strong> at the top-left of the screen, then select the<strong> pencil icon</strong> to the right of your name. On your profile screen, select <strong>Preferences</strong> &gt; choose your <strong>Timezone</strong> from the dropdown menu &gt; select <strong>Save Changes</strong>.<br/><br/><a
href= "REPLACE THIS WITH THE FULL URL LOCATION OF WHERE I WANT THE BUTTON TO POINT TO" target="_blank">Click here to view more FAQs</a></div>
</div>
</div>

Wow wow wow - thank you for this!

Has anyone gotten this to work recently?

Did a direct copy and paste of the code above, but all I can seem to get is this as a result on Chrome:

Here is my code:

CSS - 

/*CUSTOM FLIPCARD - START*/
#test_flipcard {height: 100%; transform-style: preserve-3d; perspective: 600px; transition: 0.5s; 
overflow: hidden;}
#test_flipcard:hover .card-front {transform: rotateY(-180deg);} #test_flipcard:hover .card-back 
{transform: rotateY(0deg);}
.card-front {height: 100%; width: 100%; background-position: 50% 50%; background-size: cover; 
position: absolute; top: 0; left: 0; backface-visibility: hidden; transition: 0.5s; }
.card-back {height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: 
#ffffff; backface-visibility: hidden; transform: rotateY(180deg); transition: 0.5s; color: #ffffff; 
text-align: center; margin: 0; display: flex; justify-content: center;
align-items: center;}
.card_back_text a {padding: 8px 16px; border-radius: 2px; line-height: 20px; font-size: 14px; 
font-weight: 700; color: #ffffff; background: #64A70B; text-transform: uppercase;
text-decoration: none;}
.card_back_text a:hover { color: #ffffff; background-color: #AB2328;}
.card_front_title {font-size: 25px; line-height: 34px; font-weight: 700; color:#ffffff; text-align: 
center; margin: 75px 25px 25px 25px; z-index: 1;}
.card_back_text {font-size: 16px;line-height: 22px; font-weight: 600; text-align: center; 
margin:25px; color:#ffffff;}
.flipcard_overlay {width:100%;height:100%; display: flex; justify-content: center; align-items: 
center;}
/*CUSTOM FLIPCARD - END*/

HTML - 

<div id="test_flipcard">
<div class="card-front" style="background-image:url(&quot;https://images.unsplash.com/photo-1523453462319-8c5bc9c9d3b3?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaW%20QiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1502&amp;q=80&quot;);">

<div class="flipcard_overlay" style="background:rgba(224,25,51,0.3);">
<div class="card_front_title">This is the main title on the front</div>
</div>
</div>
<div class="card-back">
<div class="card_back_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur blandit mattis. Ut suscipit euismod sodales<br /><br /><a href="https://www.traceinternational.org/tasa">call to action goes here</a></div>
</div>
</div>

@JZenker - Me too. When I gave it a try? I was in literally the same exact place. 

I questioned if it was other css applied that was in conflict…but move into other things. I was moving fast…

@sjennings78 - thoughts???

Hello everyone,

I finally got this to work.

You’ll need to replace my URL in the HTML portion with an image of your own, but you should be able to directly copy and paste both the html and css. This is for a 1/3 row widget

HTML:

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://s3.us-east-2.amazonaws.com/docebo.traceinternational/_Site+Images/tasa+widget.jpg" alt="Avatar" style="width:443px;height:300px;" /></div>
    <div class="flip-card-back">
    <div class="align-items-center">
      <h1>I figured out flipcards!</h1>
      <p>Finally!</p>
     </div>
    </div>
  </div>
</div>

CSS:

.flip-card {
  background-color: transparent;
  width: 443px;
  height: 300px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: dodgerblue;
  color: #f5f5f5;
  transform: rotateY(180deg);
}