[Falling leaves for Autumn]

Resurrected from the old forum, here's the code for getting your Fall into your Frog (orginally requested by @emoseley

<style>
.leaves {
 position: absolute;
 left: 5%;
 top: -15px;
 width: 90%;
 overflow: visible;
}
.leaves {
 position: absolute;
 left: 5%;
 top: -15px;
 width: 90%;
 overflow: visible;
}
.leaf {
 position: absolute;
 color: #DF3A01;
 -webkit-animation: falling 4.7s linear 0s infinite;
 -moz-animation: falling 4.7s linear 0s infinite;
 animation: falling 4.7s linear 0s infinite;
}
@-webkit-keyframes falling {
 0% {
 -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
 }
}
@-moz-keyframes falling {
 0% {
 -moz-transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 -moz-transform: translate(0, 0) rotate(360deg);
 }
}
@keyframes falling {
 0% {
 transform: translate3d(0, 0, 0) rotate(0deg);
 }
 95% {
 opacity: 0.8;
 }
 100% {
 transform: translate(0, 0) rotate(360deg);
 }
}
.uk_primary .os-titlebar .navbar-inner {
 background-color: #d62441!important;
 border-bottom: 3px solid #980000 !important}
body.uk_primary .os-titlebar .navbar-search input {
 background-color: #980000 !important;
 border-color: #980000 !important;
}
</style>
<script>
var frogRevealingModule = (function() {
 var keyframeprefix = '',
 domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
 pfx = '',
 elm = document.createElement('div'),
 autumning = new $.Deferred();
 for( var i = 0; i < domPrefixes.length; i++ ) {
 if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined )
{
 pfx = domPrefixes[ i ];
 keyframeprefix = '-' + pfx.toLowerCase() + '-';
 break;
 }
 }
 var randInt = function(from, to) {
 return Math.floor(Math.random() * (to - from + 1) + from);
 };
 var findKeyframeAnimation = function(a) {
 var ss = document.styleSheets;
 for (var i = ss.length - 1; i >= 0; i--) {
 try {
 var s = ss[i],
 rs = s.cssRules ? s.cssRules :
 s.rules ? s.rules :
 [];
 for (var j = rs.length - 1; j >= 0; j--) {
 if ((rs[j].type ===
window.CSSRule.WEBKIT_KEYFRAMES_RULE ||
 rs[j].type ===
window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) {
 return rs[j];
 }
 }
 // Trying to interrogate a stylesheet from another domain will throw a 
// security error
 } catch(e) {}
 }
 return null;
 };
 $.fn.autumn = function(options) {
 options = options || {};
 var me = this,
 count = options.flakeCount || 20,
 minDiameter = options.minDiameter || 20,
 maxDiameter = options.maxDiameter || 35, minOpacity = options.minOpacity || 50,
 maxOpacity = options.maxOpacity || 100,
 height = this.height(),
 flakes = [],
 keyframes;
 var characters = ['&#x1f341;', '&#x1f340;', '&#x1F342;'];
 if (keyframes = findKeyframeAnimation('falling')) {
 keyframes[(typeof keyframes.insertRule == 'function') ? 'insertRule' : 'appendRule'](
 '100% { ' + keyframeprefix + 'transform: translate3d(0,'
+ height + 'px,0) rotate(360deg); opacity:0; }'
 );
 }
 var i = count, size, css, origin;
 while (i--) {
 size = randInt(minDiameter, maxDiameter);
 origin = size / 2;
 css = {
 left: randInt(0, 100) + '%',
 'font-size': size + 'px',
 height: size + 'px',
 width: size + 'px',
 opacity: randInt(minOpacity, maxOpacity) * 0.01,
 top: (-size - 20) + 'px'
 };
 css[keyframeprefix + 'transform-origin'] = origin + 'px ' +
origin + 'px';
 css[keyframeprefix + 'animation-delay'] = (Math.random() *
10) + 's';
 flakes.push($('<div></div>').html(
 characters[randInt(0, characters.length - 1)]
 ).attr({
 'class': 'leaf'
 }).css(css).appendTo(this));
 }
 this.on('webkitAnimationIteration animationIteration',
function(e) {
 $(e.target).css('left', randInt(0, 100) + '%');
 });
 this.data('autumn', {
 flakes: flakes
 });
 return this;
 };
 function makeItautumn() {
 $('.dashboard-0').autumn({
 flakeCount: 50,
 minDiameter: 10,
 maxDiameter: 80
 });
 };
  return {
 autumn: makeItautumn
 };
})();
setTimeout(function(){
 frogRevealingModule.autumn();
}, 3000);
</script>

 

[Are you smarter than a 10-year-old?]

Just trying out something new - I've added one of our Year 6 maths quizzes to the Community.

https://www.frogcommunity.com/quiz

You'll need to log into Frog Community first (easiest way is via the Community button on your FrogLearn)

[Frog 3 and Frog Learn]

Hi @mmclaughlin

Re-reading my post - i have no idea what i was talking about.  I swear there was an extra sentence in there originally.  Everyone - offer for a tour / demo is always open.

Matt, Frog3 was more of a technical platform - we talked about bricks for building pages, (although there were widgets too) and you could construct pretty much any layout or structure with time.  The biggest difference I'd say is that in Frog3, it would take most people around 20 minutes to build a page with learning materials, compared to 5 mins(?) in FrogLearn.  

Frog3 now has the reputation for being for techies rather than teachers.  You could do more, but fewer people did - IYSWIM

Like @ADT has said, there are some features like Frog Tabs missing from Learn.  Frog Tags are simple codes like [user_username] which worked in both the text & html bricks to display personalised information.  Schools could create their own tags and upload data to them.  Forms have more freeform too, and allow you to control the layout, with more flexibility and use the form results as a database.

There are other elements "missing" in Learn, but then Learn has things like FrogSnap.

[Style sheets inside image properties]

I was curious to see what these would look like, so I've created a page for them:

https://www.frogcommunity.com/philtimages

Phil - morph doesn't appear to do anything, is it the image choice?

[Single Sign Ons]

18 hours ago, ADT said:

When are you going to pull your finger out and sort out a single sign on for Kerboodle again!!  There used to be one in Frog 3!!!

Anyone else have something that used to have a SSO in Frog 3???  Or ones they want to see...... List them here!!

In fairness, the original SSO was done with support from Kerboodle - then they sold themselves to OUP who rewrote the entire platform.  

When I was working in a school I called Kerboodle (both their support and via Twitter).  We are more than happy to work with OUP and Kerboodle, but it will help if you can also raise these requess with them.

Having said that, a list of 3rd party SSOs is a good idea and one I will pass on to our partner coordinator.

[Frog 3 and Frog Learn]

Hi @mmclaughlin

If you (or anyone else reading this) would like an account set up on our demo platform and a remote session where I'll talk you through what FrogLearn can do, just drop me a line.

 

Graham

[Options Portal]

Strange.  It's been a bit slow for me, but working now.  Can you try again please with any site.

I've logged into your Frog and was able to downloadthe options site

[Options Portal]

Hi Kieran

Sorry, it's not a template as such.  The Subject page can be thought of as a 'suggested layout'which is ready for copying.  When you install from the Frog Store, the sites appear as regular private sites in your Frog Drive.  You can set them as templates.

Are you saying the site hasn't installed?

[Options Portal]

We've added a new site to the Frog Store.  The site comes with a form for student choices, a "template" for subject information - especially easy to use with the new Copy Page function.

[New Welcome Message!!]

  You know some days it's just not worth getting out of bed,

Yes, the acceptable use poilcy could be used for special messages.

Being former school staff myself, my first instinct was the same as yours, that staff wouldn't like it.  Then we started on the roadshows and teacher after teacher (and IT staff too) didn't know about new features.  (Almost without fail, when you get a software update you get some form of pop-up.)

Those staff who have complained to you, were they aware of the new features already?

Of course, if you're still not convinced there's always the ideas portal.

 

[New Welcome Message!!]

Hi @ADT

The welcome message only appears once after each update.  There is an X - close button in the corner.  The information is also available under the Frog head, in case someone wants to read it again.  It can't be turned off, but can be quickly dismissed.

We've added this feature after a huge amount of feedback from teachers who told us they weren't being made aware of the latest features in Frog.

Special notices - no sorry, although there is work ongoing for a user agreement pop-up which schools will be able to customise. ( out of date - see ADT's post below )

We had a discussion on the old forum about this and I posted this code:

<div id="mydiv" style="display:block; cursor: pointer; background:#FFFFFF; position:absolute; left:50px; top:30px; z-index:50;">Hello</div>

<script>
$("#mydiv").click(function(){
$(this).hide();
});
</script>

The z-index part will lift it above the rest - layers 999 and 9999 are used by Frog's navigation, but you can always increase the z-index if 50 isn't sufficient. The jQuery in the script will hide the pop up when it's clicked on. You could always add a close button and then you'll just need to change it to something like:

<script>
$("#mydivclose").click(function(){
$("#mydiv").hide();
});
</script>

@smackie2 seemed to like it at the time:

Quote

Thanks Graham - you've made my day! That will be perfect - will combine it with date rules too.
Now I'm off to book myself onto a CSS course - really need to learn myself some more!

 

[Two new themes on the Frog store]

Hi folks,

We've added a couple of new themes to the Frog Store:

 

Side menu, mobile, 250 is a variation on the current default theme. This theme has top-level navigation at the bottom of the banner, with a side menu for 2nd-tier links. 3rd-tier links drop-down from the 2nd-tier.

 - Side icon

What it looks like:

Banner bottom menu (better name suggestions please!) is another variation on the mobile responsive, fixed height banner. This theme has the navigation menu at the bottom of a shorter banner.

[Password expired causing problems]

I never handled the AD for my school's network, but could you disable the auto-expiry and switch to a manual expiry?   That way you could ensurethe resets all happen mid-week instead of every 60 days 

[Network Widget CSS Modification]

Hi @krisdan

All CSS in an HTML widget can do is change the look of something.  You're not accessing any APIs, running scripts etc...

Can you post a screenshot.  I'd be interested to see what you've done.

Graham

[Style sheets inside image properties]

This might help:

https://www.frogcommunity.com/css/image-class

 

[FrogSnap]

We've both told the truth.   I said 'as soon as I know it is live, I will let you know'.  

I hadn't heard it is live  

[FrogSnap]

UPDATE:

The fix for FrogSnap and iOS10 has been pushed to the Apple store.  Therefore all being well this should be live in the next 2-3 days.

As soon as I know it is live I will let you know.
 

[Folder Icons]

The icon image is hard coded into FrogLearn I'm afraid, although CSS can come to the rescue here.   

As with any element in FrogLearn, if you right-click on a folder and choose "Inspect Element" you see the final HTML used to generate the folder

With a bit of practice, you can spot the CSS class which sets the look of the element.  In this case it's os-icon-ext-resources-folder, so if we then add an HTML widget to the primary dashboard we can do something like this:

<style>
.os-icon-ext-resources-folder {
    background: url('image-url.jpg?width=150&height=150') !important;
}

</style>

• You will have to upload your own image to a shared area in Frog (I couldn't get color overlay to work)
• It's always worth adding ?width=150&height=150 to the URL as this triggers Frog to create a smaller image - rather than use a huge picture for a tiny icon
• !important was needed as it forced the style sheet to overwrite the orginal.  Unfortunately IE does not respond to !important

If you do get something working, please post a screenshot here - it might inspire others and I'll show the product team

Graham

[Search Pages]

Hi @ghughes

I've been thinking about this and I think it might be possible, but long winded.  You can create a string search in Javascript / jQuery and add an onclick event to trigger a page link.   It would be a bit of work to set up, but should work for you.

Simon's tutorial might be able to get you started - https://frog.frogcommunity.com/html-forum

[File Drop SlideShow - updated]

Hi everyone,

One of our awesome devs (Simon) has just pointed out an improvement to the File Drop code on this tutorial: https://www.frogcommunity.com/filedrop

We've added this ?width=400&height=500 to the image URL.   This code isn't about controlling size of images, it actually tells the Frog server to create a new version of the image at the size specified.  This allows you to let users upload enormous images which then are automatically reduced to a useable file size.

Graham

[FrogSnap]

UPDATE:

We have a fix for the FrogSnap mobile application and iOS10.  We are just pending confirmation when this update will be pushed to the Apple store.  After this, it could be a further 2-3 days for Apple to approve the changes and make live. 
 

[Displaying a PDF]

Unfortunately, you can't display a spreadsheet or document in the same way.  For the Bugs list, I used an Office365 account and Share the document live to anyone with the link.  At that point, I was then able to embed it like a regular web page.

 

 

[Bulk share to timeline from Frog?]

Hi @Corinne,

Aww man, that sounds frustrating.  We've kicked it round the office and yeah, right now, you have to individually send each photo to a site.  The soon-to-appear galley widget would help here, but in the meantime, this tutorial can display files in a folder:

https://www.frogcommunity.com/understanding-api/calling-an-api

If you need help setting this up, drop me a line

Graham

[My Assignments HTML]

Hi @ghughes

I think that's from @shutterm's school.  It might be an entirely separate set of pages - technically it would be possible with the HTML widget.  I'll show the design team here and see if they get excited 

[Background Change]

Hi Gareth,

Each theme has it's own unique identifier, I've just checked and yours is B0DC67742002CF221368FF8A6CBB100993BEC49C894D6FA9.  This means we can change the look of all sites with this theme without affecting the others.

So, using CSS in an HTML widget, the code is going to be something like:

<style>
  div[data-site-theme="B0DC67742002CF221368FF8A6CBB100993BEC49C894D6FA9"] {
    background:#FF0000 !important;
  }
</style>

But, you might want to just change one section of the theme.  Frog sites are made up of DIVs, so we just need to identify the correct section.

Simplest way to do that is:

1. Right-click on your site and choose Inspect Element (ideally in Chrome)
2. The Developer console will open
3. Make sure you're on the Elements tag/section
4. Move your mouse point through the code in the Elements and you'll see that different parts of your Frog site highlight in blue.  
5. When the bit you want to change is highlighted, you'll see the code shows a DIV with a class name - that's the stylesheet class you need to set to be something new.