Jump to content

Graham Quince

Administrators
 View Profile  See their activity

  • Posts

    2,048

  • Joined

  • Last visited

 Content Type 

Posts posted by Graham Quince

    Tabs - Concept Demo

    in Learn / Play / Progress

    Posted

    Hi @paulmitchell1989,

    When I looked at the site you'd created, I realised that using the Nested Page widgets, you'd be loading a lot of content, only to then hide of it on the tabs.  So instead, I've tweaked the code to load an iframe on click:

    This first HTML widget is the styling and layout code: 

    <style>
.notice-tabs {
    float: left;
}

.notice-tab {
    display: inline-block;
    min-width:65px;
    height:27px;
    text-align:center;
    border: 1px solid #cccccc;
    border-width: 1px 1px 0 1px;
    border-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    margin: 0px;
    padding: 5px;
    padding-top:10px;
    cursor: pointer;
    min-width: 20px;
    font-size:10pt;
}

.notice-tab {
   
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */
    color:#FFFFFF;
}

.notice-tab.active {
    background: #FFFFFF;
    color:#000000;
}
</style>
<div class="notice-tabs">
    <div class="notice-tab active" data-year="0">Attendance</div>
    <div class="notice-tab" data-year="1">Merits and Cards</div>
    <div class="notice-tab" data-year="2">Grades</div>
    <div class="notice-tab" data-year="3">Subject Overview</div>
    <div class="notice-tab" data-year="4">Contact Teachers</div>
</div>

    This second HTML widget is the jQuery which contains the clicking: 

    <script>
var $sitesElement = $('.ui-os-main-window:first, .ui-dialog.focused, dashboard-0').find('.sites_core'),
    noticesUuid = {},
    $widgets = $sitesElement.find('div.sites_widget'),
    $iframe = $("<iframe>", {
                id: Frog.Utilities.generateSimpleId(),
                width: '100%',
                height:'1200px'
              }
    ),
    hideAllShowOne = function(yearGroup) {
        $sitesElement.find('.notice-tab').removeClass("active"); // remove the active class from all DIV
        $sitesElement.find('.notice-tab[data-year=' + yearGroup + ']').addClass("active"); // add the active class to the selected DIV
        $iframe.attr('src',noticesUuid[yearGroup]);
    };

    
noticesUuid[0] = "YOURSCHOOL/index.phtml?d=623515";
noticesUuid[1] = "YOURSCHOOL/index.phtml?d=623537";
noticesUuid[2] = "YOURSCHOOL/index.phtml?d=623530";
noticesUuid[3] = "YOURSCHOOL/index.phtml?d=623546";
noticesUuid[4] = "YOURSCHOOL/index.phtml?d=623525";

hideAllShowOne(0);

$sitesElement.find('.notice-tab[data-year]').bind('click', function(ev) {
    hideAllShowOne($(this).data('year'));
});
    
this.element.append($iframe);
</script>

     

    • Like 1

    Tabs - Concept Demo

    in Learn / Play / Progress

    Posted

    Hi @paulmitchell1989

    I've not written a tutorial on the Concept-demo tabs as it's a little complex to get all the UUIDs for the html.  It's quite easy to get wrong and quite hard to spot what's gone wrong.  That said, I'm quite happy to install the site on your platform and help tailor it to suit your needs.  The tabs use the nested page widgets, so you can have whatever content you like each page.

    Graham

    • Like 1

    Tutorial: Displaying personalised, custom data

    in Coding

    Posted

    I've been very aware that a number of Frog3 schools are disappointed there is no equivalent to Frog Tags in FrogLearn.  And I'm told it is something we want to rectify.  The ability for schools to display your own personalised data to students inside FrogLearn is an understandably desirable option.

    While we work on an internal solution (no ETA I'm afraid), I've prepared a tutorial along with @Chris.Smith (our developer advocate) taking you through all the steps needed to set up a Google Firebase data store, query it from inside FrogLearn and display the results back in a Frog Site.

    It looks intimidating, but I've broken it down into straight forward steps for the various stages.  Once set up, updating the data becomes a simple task - arguably with fewer steps than updating the data in Frog3's toolkit.

    What this means is that you can display any information you choose to upload, so house points, your own rewards system, additional attainment information - anything you can get into a spreadsheet - provided you have a single student identifier in there such as UPN or username.  Being a Google product, Firebase is a secure data store - although being a third-party product, you should make that determination for yourself.

    https://www.frogcommunity.com/customdata

    I hope this helps.

    Graham

    Twitter Widget

    in Learn / Play / Progress

    Posted

    You can target it like any widget for styling?

    This is the CSS i use for the forum feed on the community: 

     /* RSS feed - forum activity*/
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] h2:before  {
        content:"Frog Forums - ";
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] h2  {
        visibility:hidden;
        height:0px;
        overflow:hidden;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] small  {
        visibility:hidden;
        height:0px;
        overflow:hidden;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] a  {
       color:#0071b9;
       font-weight:bold;
    }
    div[data-content-uuid="D2C73B0D200288AE6903DFFA2E2A1302C38D3B1C96E71BC6"] .feed_content  {
        position:relative;
        top:-40px;
    }

     

    Workspaces Issue When Embedded in Froglearn!

    in Learn / Play / Progress

    Posted

    Well, funny you should mention the shared folder widget.   Just before the christmas break, Graham Thorpe showed me a Site search widget - basically a widget which can display sites tagged with a specific keyword.  In essence it's an automated menu widget.  

    Still not the same as Frog3, in terms of users choosing to sign up, but it's getting there.

    Student Tracker 'Goal' - can someone explain please?!

    in Learn / Play / Progress

    Posted

    Hi @smackie2,

    I've checked with Tom to make sure I have this right:

    As far as I understand this is an additional intervention tool that staff can use in the classroom while on the go, without the need of changing the whole school curriculum.

    It allows staff to add in an extra custom objective within a tracker for 1 or more students, which can be used as a smaller step towards a larger objective

    OR

    reference a key point/piece of knowledge that a student/students may be missing, which once achieved the staff member can be confident they are on track with the parent objective.

     

    This doesn’t currently pull through to reports but this is planned to in the future.

     

    As mentioned, this won’t change what is in the curriculum designer (as you wouldn’t want every staff member constantly changing it through the year), but during moderation meetings staff may want to share how they have used these goals with SLT, as some of these goals may need to be incorporated into the curriculum where appropriate.

     

    Hope that clears things up

    Graham (and Tom)

     

    Workspaces Issue When Embedded in Froglearn!

    in Learn / Play / Progress

    Posted

    Hi @ADT

    So, I've been off over the break, and just seen your post.  I've logged into your platform and can see the workspaces page.  I think I've spotted the issue, looks like there should be an intermediate page inbetween the deletion script and a redirect.   I'll create a ticket for you and get the bug team to investigate.

    Out of interest, what elements of workspaces are you using that FrogLearn cannot replicate.  I can see that users can choose to join for themselves (in Frog3), but I've helped schools replicate this with a form and Groups and Policies (not automated, but quite efficient.)

    Walls and shared folders can be set up easily enough in a site template - on site creation, the site is shared with a group.  Any new user then just gets added to the group.

    Graham

    Google Search Bar!!

    in Coding

    Posted

      

    <style>
/* Adding some styling to the overall search */
.googleSearchContainer {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,ffffff+94,bababa+100 */
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top,  #e5e5e5 0%, #ffffff 94%, #bababa 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#ffffff 94%,#bababa 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e5e5e5 0%,#ffffff 94%,#bababa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
padding:10px;
border-radius:10px;
}

</style>
<!-- This is a simple form which opens a Google search, target="_blank opens it in a new tab -->
<form method="get" action="http://www.google.com/search" target="_blank">

<div class="googleSearchContainer">
<!-- to add a Google logo, we need an image source.  I've uploaded one to the community site, but you might want to make your own. -->
<img width="84" alt="Google Search" style="float:left; margin-right:20px; display:inline-block;" height="42" src="https://www.frogcommunity.com/app/file/asset/B86E8730200307B938CE4FD07643260F91C219AC171C65DC.png"> 
<table align="center">
<tr>
  <!-- This search box has a width of 200px, you can adjust that to fit your layout -->
<td style="height:30px;"><input type="text" style="width:200px;" name="q" size="17" maxlength="200" value="" /></td>
<!-- using bootstrap classes btn and btn-danger to make a red button -->
<td style="height:30px;" valign="top"><button class="btn btn-danger" type="submit">Search</button></td>
</tr>
</table>
</div>
    


</form>

    Capture.JPG

    • Like 1
×
×
  • Create New...