Tutorial

Festive Touch

A guide to using HTML to make your platform festive!

Take a look at what's in the latest Frog Release - Discover Hopper

Adding an HTML widget to your school dashboard in FrogLearn and adding HTML will give you control over the look of your platform without having to build a new theme.

Please note:

You will need the HTML widget activated on your FrogLearn - this is different to the Basic Code Activity widget and the Code Preview widget. Please contact the Service Desk on 01422 395939 to get the HTML widget.
Frog's service desk cannot help you with HTML code - all snippets are provided as an unsupported resource.

Falling Snow

<script>

var wA = [],
    sA = [10,11,12],
    tA = [2,4,6,8,10,12,14],
    fA = ['&#10052;', '&#10053;', '&#10054;'];

function r(a) {return a[Math.floor(Math.random() * a.length)]}
for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)}
for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="position: fixed; color: #fff; top: -20px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo(this.element.closest('.app-sites'))}

$('.s-fl').each(function(){
var el = $(this)

setTimeout(function(){
el.animate({'top' : '100%'}, r(sA) * 1000, function(){
$(this).css('top', -20);
setInterval(function(){
el.animate({'top' : '100%'}, r(sA) * 1000, function(){
$(this).css('top', -20);
})}, r(tA) * 1000);
})
}, r(tA) * 1000);

});

</script>

Falling Snow (with outline)

<script>
/* snow flakes */
var wA = [],
    sA = [10,11,12],
    tA = [2,4,6,8,10,12,14],
    fA = ['&#10052;', '&#10053;', '&#10054;'];

function r(a) {return a[Math.floor(Math.random() * a.length)]}
for (var i = 0; i < $(window).innerWidth(); i++) {wA.push(i)}
for (var i = 0; i < 15; i++) {$('<div class="s-fl" style="text-shadow: 2px 2px black; position: fixed; color: #fff; top: -20px; left: '+r(wA)+'px; font-size: 20px;">'+r(fA)+'</div>').appendTo(this.element.closest('.app-sites'))}

$('.s-fl').each(function(){
var el = $(this)

setTimeout(function(){
el.animate({'top' : '100%'}, r(sA) * 1000, function(){
$(this).css('top', -20);
setInterval(function(){
el.animate({'top' : '100%'}, r(sA) * 1000, function(){
$(this).css('top', -20);
})}, r(tA) * 1000);
})
}, r(tA) * 1000);

});

</script>

Christmas Lights

<style>
    .ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}
body {	
    background: #000;
    }
    
 .lightrope {
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
     position: absolute;
     top: -65px;
     left: -660px;
	 z-index: 1;
	 margin: 0 0 0 0;
	 padding: 0;
	 pointer-events: none;
	 width: auto;
}
 .lightrope li {
	 position: relative;
	 animation-fill-mode: both;
	 animation-iteration-count: infinite;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 12px;
	 height: 28px;
	 border-radius: 50%;
	 margin: 20px;
	 display: inline-block;
	 background: rgba(12, 236, 65, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1);
	 animation-name: flash-1;
	 animation-duration: 2s;
}
 .lightrope li:nth-child(2n+1) {
	 background: rgba(255, 236, 122, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.5);
	 animation-name: flash-2;
	 animation-duration: 0.4s;
}
 .lightrope li:nth-child(4n+2) {
	 background: rgba(220, 0, 77, 1);
	 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 1);
	 animation-name: flash-3;
	 animation-duration: 1.1s;
}
 .lightrope li:nth-child(odd) {
	 animation-duration: 1.8s;
}
 .lightrope li:nth-child(3n+1) {
	 animation-duration: 1.4s;
}
 .lightrope li:before {
	 content: "";
	 position: absolute;
	 background: #222;
	 width: 10px;
	 height: 9.3333333333px;
	 border-radius: 3px;
	 top: -4.6666666667px;
	 left: 1px;
}
 .lightrope li:after {
	 content: "";
	 top: -14px;
	 left: 9px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .lightrope li:last-child:after {
	 content: none;
}
 .lightrope li:first-child {
	 margin-left: -40px;
}
 @keyframes flash-1 {
	 0%, 100% {
		 background: rgba(12, 236, 65, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1);
	}
	 50% {
		 background: rgba(12, 236, 65, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 0.2);
	}
}
 @keyframes flash-2 {
	 0%, 100% {
		 background: rgba(255, 236, 122, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 1);
	}
	 50% {
		 background: rgba(255, 236, 122, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.2);
	}
}
 @keyframes flash-3 {
	 0%, 100% {
		 background: rgba(220, 0, 77, 1);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 1);
	}
	 50% {
		 background: rgba(220, 0, 77, 0.4);
		 box-shadow: 0px 4.6666666667px 24px 3px rgba(220, 0, 77, 0.2);
	}
}
 
</style>

<ul class="lightrope">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Flying Santa

To use, you'll need to upload a gif (GIF Example) to somewhere on the same site, I prefer to use a Text widget for this, as you can right-click on the image and get the URL.

Once you've copied the URL, you can hide the widget and add it to the code, like so:

background: url('WEB_ADDRESS_OF_SANTA_GIF');
becomes:
background: url('/app/file/asset/A273372C200303B6297B8F7901942B050783045C6F3B715C');

<!-- 
GIF from https://www.animatedimages.org/cat-santa-claus-359.htm
-->

<style>
    .ui-theme-basicnavigation-wrapmain {
        overflow-x: hidden;
    }
    .santa {
        background: url('WEB_ADDRESS_OF_SANTA_GIF');
        animation-name: sleigh;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        width: 350px;
        height: 120px;
        position: fixed;
        z-index: 1;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

    /* The animation code */
    @keyframes sleigh {
        0% {
            left: -550px;
            top: 0px;
        }
        33% {
            top: 500px;
        }  
        66% {
            top: 100px;
        }
        100% {
            left: calc(100vw + 350px);
            top: 0px;
        }
    }

</style>
<div class="santa"></div>

Jubilee Bunting

<style>
    .ui-theme-basicnavigation-wrapmain {overflow-x: hidden;}
body {	
    background: #000;
    }

 .bunting {
	 text-align: center;
	 white-space: nowrap;
	 overflow: hidden;
     position: absolute;
     top: -65px;
     left: -660px;
	 z-index: 1;
	 margin: 0 0 0 0;
	 padding: 0;
	 pointer-events: none;
	 width: auto;
}
 .bunting li {
	 position: relative;
	 list-style: none;
	 margin: 0;
	 padding: 0;
	 display: block;
	 width: 59px;
	 height: 75px;
	 margin: 20px;
	 display: inline-block;
	 background-image: url('IMAGE_FILE_URL_GOES_HERE');
}

 .bunting li:after {
	 content: "";
	 top: -12px;
	 left: 54px;
	 position: absolute;
	 width: 52px;
	 height: 18.6666666667px;
	 border-bottom: solid #222 2px;
	 border-radius: 50%;
}
 .bunting li:last-child:after {
	 content: none;
}
 .bunting li:first-child {
	 margin-left: -40px;
}

</style>

<ul class="bunting">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Tutorials in this series...

An introduction to HTML

CSS Styling

Open Dyslexic Font

Understanding Frog's APIs

External links on your Site's Navigation

Bouncing Frog Head

Using the File Drop

Searching Forums

Embed Twitter Feeds

Custom Assignment Widget

Frog Font of Icons