mobrien

@Graham Quince I worked out how to get as close to this as possible! Using the ad-hoc date selector in Analytics, I've been able to get a list of students who logged in per day, then compare that to our SIMs student list. Works a treat.

Many thanks @Graham Quince. Unfortunately, this is not quite what I am after. I'm happy with combining all the data together, but where a user has logged in 10 times, I'd like to be able to see all those 10 logins listed line by line. And for all students...

@Graham Quince Sorry to add to this but... The Visitor Log widget would help me going forward, but I have also been asked to provide a report of student login patterns for groups and individual students e.g. Vulnerable students for the week passed. The Analytics app shows me total number of logins, but I need the raw data that the count is sourced from. Is this something that Frog can provide me with? Even if it was an Excel dump I can process it as needed. Any help gratefully received as ever!

@Graham Quince Hopped on our platform this morning to give this a whirl. I could see the widget already installed, checked and there were no updates. But when I add it to a site, even a brand new site, it adds a strange empty placeholder and then I am not able to save the site, or click any other buttons in fact. Refresh the page is the only available action. Any ideas?

@Graham Quince the idea of grouping staff into teams is good, but the HR manager would have to check around 20 teams' sites/forms (!!) for updates as the data viewer only appears to display data from a single form. The idea of having a dynamic keyword was so that the teacher would specify the staff code of their line manager. Using this keyword, filters could be applied to only display them to the relevant line manager - worth a thought, perhaps? I'd used your Governor Portal policies as the source for my thinking this morning. @adamw my other consideration for thought is that the first layer of approval would work great, but how does the HR manager get notified of the response updates? Would it be possible to add a two stage notification system...? Thank you to you both

@adamw and @Graham Quince thank you for this - it sounds like it is getting close to the solution we are looking for! Thanks for your tips - I'll take a look at them now, in particular the Wall idea. Intrigued to hear the afore mentioned 'other' development. Looking forward to the details as ever! Thanks for your help so far.

Dear Community, I have been granted a day today to develop a system for staff absence requests in School. I had originally planned on using SharePoint, but I was inspired by @Graham Quince at Frog18 yesterday and have started to look at using Frog instead. A combination of Forms, Data Viewer and the Keyword widget appear to be the key. I have, however, hit a couple of conundrums that I am struggling to resolve, and wonder if there might be any help from the community. Please treat me as a complete coding beginner with very little experience... Description: Teacher1 creates an 'Absence Request' site from a template Teacher1 enters details into the page describing the absence. e.g. dates, reasons etc. (I can build this all in HTML, but the forms widget will make a nicer job). They submit the data to be stored (and viewed later), AND click the 'Submit' keyword button LineManager1 sees the site in a keyword-filtered site list. LineManager1 reads the data Teacher1 entered, and approves/rejects with another keyword widget. Queries (3) Is there a way to create a button that will create a new site from a specific template? How do I store the data entered in the fields into he page of the site so that the owner AND line manager can read the data (not by using the Data Viewer format)? Is it possible to have a field (variable) with a button that sets a keyword equal to that field. I hope you can help. Thank you

@pconkie You are quite simply: a genius! Brilliant, works a treat. Thank you very much.

Hi @pconkie, Thank you for this! It has not quite worked, but nearly there. I've amended it for the two subjects in my own TT (science and physics) and double checked that this is the SIMs name. I also made the 'stringtocolour' changes to 'subjecttocolour', as suggested. I also took out all other subject references to make sure eliminate any other variables and gave it a go. However, the timetable is only returned in the default colour specification (black in this instance). Is there anything that I am missing?: var subjectToColour = function(subject) { var colour = ""; switch(subject.toLowerCase()) { case "science": colour = "#4daa50"; break; case "physics": colour = "#007681"; break; default: colour = "black"; } return colour; }; Thank you for your help with this.

@pconkie I've just been having a play with this code and have got it to work!! (after some serious trial and error...) Brilliant stuff, though! In section 5 you describe how you generated the subject colours, based upon their names as they arrive. I've managed to amend the colour schemes by adjusting the 'p * 8' multiplier here: var stringToColour = function(str) { var hash = 0; for (var i = 0; i < str.length; i++) { hash = str.charCodeAt(i) + ((hash << 5) - hash); } var colour = '#'; for (var p = 0; p < 3; p++) { var value = (hash >> (p * 8)) & 0xFF; colour += ('00' + value.toString(16)).substr(-2); } return colour; }; My question is, would it be possible to pre-select a colour per subject? For example, we have a colour coded building, and it would be nice to match the subjects with their location colour. I know in you post you mentioned that you tried to avoid this, though. Thanks, Michael.

Excellent, many thanks @Graham Quince, worked a treat!

Dear Community, On the Frog website designs showcase page, there is a link to Theale Green School. We have noticed that they have a calendar widget on their homepage without the skeuomorphic red rings at the top. Does anyone have some code to achieve this with the HTML widget? All I have managed to do so far is remove the header text. Thanks, Michael

Hi @Graham Quince, Thank you for the explanation - makes total sense. It's good to know that security is a non-negotiable. M.

@pconkie Many thanks for this, that's really clear now. Thank you for taking the time to explain it to me. So, I think I might have a finished product, as below. This will be used to display students' Rewards to tutors during tutor time. All in one place, with one set of data. @Chris.Smith and @pconkie, what you have built for me here is far more than I could have expected. Thank you. Once we have a live version with the Excel part to build the data, I'll post the results here. Thank you again, Michael

We have had FrogPlay for just over two years now. we haven't ever done a huge launch with students, just offered it to departments to embed in their departmental sites, and made links to it available on a student hub page. Science and Maths have really seen the most success and command most of the usage so far. See the screenshot below with our stats. This equates to 4200 quizzes this year, 54% completed by Y11 students. Our 'in school' figures are high because internal home work marking lessons are regularly followed by an opportunity to use FrogPlay to further embed their learning. In the next few weeks we are launching a Y10 dedicated site and FrogPlay competetion to encourage revision before end of year mock exams. For this coming year we are going to be running a section of our rewards system to further incentivise FrogPlay use, and ultimately, embed learning retention. i was at a curriculum leader meeting this Tuesday giving a breakdown of Frog's usage stats and individual student success stories. One particular reference I made was to the Technology courses, where they have only a very basic department site (currently...) but students have spent just under 5 hours on FrogPlay for DT alone ! It's great.

@Graham Quince and community Frog, In another topic about HTML tables that @Chris.Smith is providing me with a huge amount of hand-holding, he mentioned amending the data contained within my HTML code using a script and JSON format data. It is much simpler than lines and lines of HTML for each row data. It started me thinking: further to our discussions about using FireBase to contain and access individualised data, could there be an alternative method written directly into the HTML widget, without the need for FireBase? My thinking for the HTML is as follows, and as mentioned in my other post, please note that my skills are barrel bottom in terms of availability: 1. Call up/define the logged in user's upn, as described in the "Displaying personalised, custom data" post on the Frog Community 2. Define a table 3. Provide all required table cell data in JSON format within the script (see below) 4. Populate the data in the table with the fields that ONLY correspond to those that match the user's upn. This would somehow also require the data in the JSON format to contain and recognise the upn? Upn would obviously not be displayed. @Chris.Smith included the JSON data as follows. I have amended it to include a reference upn and an alternative use. data = [ { upn: 'FRG_12321', name: 'Student Tom', house: 'Bowman', tutor: 'ACR', MyMaths un: 'Tom', MyMaths pw: 'tree' }, { upn: 'FRG_34243', name: 'Student Sarah', house: 'Fulford', tutor: 'MOB', MyMaths un: 'Sarah', MyMaths pw: 'flower' } ]; The applications for this are enormous, such as passwords as in the data, or sharing student grades. Hope you can help, Michael

@Chris.Smith At the risk of taking far too much of your time here, I am stuck. Please bear in mind that you are conversing with a total coding beginner here - I was good with formatting an HTML table, largely thanks to Google, but was totally lost within the scripting syntaxes that you have provided me with! I can follow what is taking place within the code, but have zero idea as to how to edit it with what you suggest! So, Query1: should the definition of the cell colours appear after line 14? Query 2: Where and how (important...) do I 'set the attributes against the row when preparing the template' as you suggest? Ever grateful, Michael <style> .template { display: none; } thead { background-color: red; } th, tbody { border-width: 1px; border-color: #e6e6e6; border-style: double; padding: 10px; font-size:14px } </style> <table class="table table-striped"> <colgroup> <col style="width: 25%"> <col style="width: 15%"> <col style="width: 15%"> <col style="width: 15%"> <col style="width: 15%"> <col style="width: 15%"> </colgroup> <thead> <th>Name</th> <th>House</th> <th>Tutor</th> <th>Achievement</th> <th>Behaviour</th> <th>Total</th> </thead> <tbody></tbody> </table> <table class="template"> <tbody> <tr> <td data-field="name"></td> <td data-field="house"></td> <td data-field="tutor"></td> <td data-field="achievement"></td> <td data-field="behaviour"></td> <td data-field="total"></td> </tr> </tbody> </table> <script type="text/javascript"> var returnSuccess = function(params, output) { return [ 200, "success", { "data": output, "status": "success", "params": params } ]; }, data = [ { name: 'Student 1', house: 'Bowman', tutor: 'ACR', achievement: 1100, behaviour: 10, total: 1090 }, { name: 'Student 2', house: 'Fulford', tutor: 'MOB', achievement: 1623, behaviour: 196, total: 1427 } ]; $.fixture('GET myapi.get', function(original, settings, headers) { return returnSuccess(original.data, data); }); $.fixture('GET myapi.sort', function(original, settings, headers) { var params = original.data, key = params.key, direction = params.direction, sorted_data = data.sort(function(a, b) { if (direction === 'asc') { if (a[key] < b[key]) { return -1; } else if (a[key] > b[key]) { return 1; } else { return 0; } } else { if (a[key] < b[key]) { return 1; } else if (a[key] > b[key]) { return -1; } else { return 0; } } }); return returnSuccess(params, sorted_data); }); $.fixture('GET myapi.filter', function(original, settings, headers) { var params = original.data, filtered_data = []; for (var key in params) { filtered_data = data.filter(function(datum) { if (datum[key].constructor.name !== "String") { return parseInt(params[key], 10) <= datum[key]; } return (new RegExp(params[key], 'gi')).test(datum[key]); }); } filtered_data = Array.prototype.concat.apply([], filtered_data); filtered_data = filtered_data.filter(function(datum, index, self) { return self.indexOf(datum) === index; }); return returnSuccess(params, filtered_data); }); </script> <script> var promise, renderData, applyTableFilter; if (steal.then !== undefined) { promise = steal('//frogui/components/mysorter/mysorter.js', '//frogui/components/tablefilter/tablefilter.js'); } else { promise = steal.import('frogui/components/mysorter/mysorter', 'frogui/components/tablefilter/tablefilter'); } promise.then(function() { var $table = this.element.find('table:first'), $tbody = $table.children('tbody'), $template = this.element.find('.template tbody > tr'), houses = {}, tutor = {}; $table.frogui_components_mysorter({ headers: { name: 'asc', house: 'asc', tutor: 'asc', achievement: 'asc', behaviour: 'asc', total: 'asc' } }); applyTableFilter = function() { $table.frogui_components_tablefilter({ filters: { name: { type: 'text', placeholder: 'Student Name', data: [], position: 0 }, house: { type: 'select', data: Object.keys(houses), placeholder: 'House', position: 1 }, tutor: { type: 'select', data: Object.keys(tutor), placeholder: 'Tutor', position: 2 } } }); $table.find('.filter-row, .filter-submit-row').removeClass('hide'); }; renderData = function(data) { data.forEach(function(datum) { var $row = $template.clone(); for (var key in datum) { $row.find('[data-field='+key+']').text(datum[key]); } houses[datum.house] = null; tutor[datum.tutor] = null; applyTableFilter(); $tbody.append($row); }.bind(this)); }.bind(this); $table.on('mysorter.sort', function(ev, sort) { Frog.Model.api('myapi.sort', sort) .done(function(resp) { $tbody.empty(); renderData(resp.data); }); }); $table.on('tablefilter.submit', function(ev, data) { Frog.Model.api('myapi.filter', data) .done(function(resp) { $tbody.empty(); renderData(resp.data); }); }); $table.on('tablefilter.reset', function(ev, data) { Frog.Model.api('myapi.get') .done(function(resp) { $tbody.empty(); renderData(resp.data); }); }); Frog.Model.api('myapi.get') .done(function(resp) { renderData(resp.data); }); }.bind(this)); </script> <script> var house_colors = {}, getColorForHouse; getColorForHouse = function(house_name) { var data = {}; if (house_name in house_colors) { return house_colors[house_name]; } data.color = (Math.floor(Math.random() * 16777215)).toString(16); data.text = (parseInt(data.color, 16) > 0xffffff / 2) ? '000000' : 'FFFFFF'; house_colors[house_name] = data; return data; }; renderData = function(data) { data.forEach(function(datum) { var $row = $template.clone(), color_data = getColorForHouse(datum.house); for (var key in datum) { $row.find('[data-field='+key+']').text(datum[key]); } houses[datum.house] = null; tutor[datum.tutor] = null; applyTableFilter(); $row.find('[data-field=house]') .css({ 'backgroundColor': '#' + color_data.color, 'color': '#' + color_data.text }); $tbody.append($row); }.bind(this)); }.bind(this); </script>

@Chris.Smith Yes, that's right, a different colour for each House colour

@Chris.Smith I had a good play with this yesterday evening and I'm not far from what appears in my mind's eye (see attachment). I removed some of the filter conditions so that Tutors have only those that they will need. The final part of the jigsaw is whether there is the possibility of conditionally formatting the 'House' cells/column. i.e. that the 'Bowman' cell appears one colour, 'Fulford' another colour etc. I can see that there is javascript if, then else possibility, but I have no clue how this might be written into the new json code that I am now using. Do you have any suggestions? Michael

@Chris.Smith Wow. This is superb - far more than I had expected. It will take me some time to process through, but this is exactly what I needed and more. I am very grateful. Glad it was a welcome distraction along the way too! @pconkie I hope one day to be at some sort of level where I can decode your comments! Aiming for the sky and hitting the ceiling at the moment. Thank you all for your help today. M.

Hi @Chris.Smith, This is much tidier than my original 'attempt'. The organisation of the data rows in the code is fine, and easily manipulated which is what I need. There are two parts that I would like to add, a Header row colour for our House Groups (should this go within the Styles?) and the filtering function that you describe. Really grateful for all this help! Michael

@pconkie this is superb! Just what I was looking for. I suppose I neglected to mention that my HTML skills are basic at best, using a piecemeal approach to building what I need. I'm interested, however, that you mention you might have done the task differently? Would you be able to elaborate. I have also been looking at adding a filter function to the table as illustrated here: https://www.w3schools.com/howto/howto_js_filter_table.asp Is this a similar issue to the one I had before? The reason I am doing all this is to replace embedding a clunky Excel file to display rewards points to Tutors, term by term. By writing an Excel formula next to my raw data, I can build HTML code to quickly copy into Frog for updates. Once my Code is complete here, I'll add a walkthrough and the Excel files to match for anyone else looking for a similar solution. Thank you for your help - it is much appreciated. PS. here is my updated code removing numerical characters from student names: <script type="text/javascript" src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script> <script> $(document).ready(function() { $("#myTable").tablesorter(); } ); </script> <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 1px; border-color: #e6e6e6; border-style: double; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 1px; border-color: #e6e6e6; border-style: double; padding: 10px; } table.GeneratedTable thead { background-color: #52b9e9; } </style> <table class="GeneratedTable" id="myTable"> <thead> <tr> <th>Name</th> <th>House</th> <th>Tutor</th> <th>Achievement</th> <th>Behaviour</th> <th>Total</th> </tr> </thead> <tbody> <tr> <td>Tom Smith</td> <td>Bowman</td> <td>ACR</td> <td>1100</td> <td>10</td> <td>1090</td> </tr> <tr> <td>Harry Jones</td> <td>Fulford</td> <td>ACR</td> <td>1623</td> <td>196</td> <td>1427</td> </tr> <tr> <td>Will Davis</td> <td>Netherfield</td> <td>MOB</td> <td>1507</td> <td>198</td> <td>1309</td> </tr> <tr> <td>Emily O'Brien</td> <td>Saunderson</td> <td>MOB</td> <td>1920</td> <td>326</td> <td>1594</td> </tr> </tbody> </table>

Hi Community, I am just playing with the HTML widget and tables, looking for a way to replace embedding Excel docs with native HTML. I can get the table to display as I want, however, I cannot seem to get the table to 'sort on click' of the header, as described in many various forums. The code I am using is below, and if I copy this into the live editor on w3schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc) it works a treat. But, it does not seem to function in Frog HTML widget. Any ideas? Thank you in advance for your support. Michael <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 1px; border-color: #e6e6e6; border-style: double; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 1px; border-color: #e6e6e6; border-style: double; padding: 10px; } table.GeneratedTable thead { background-color: #52b9e9; } </style> <table class="GeneratedTable" id="myTable"> <thead> <tr> <th onclick="sortTable(0)">Name</th> <th onclick="sortTable(1)">House</th> <th onclick="sortTable(2)">Tutor</th> <th onclick="sortTable(3)">Achievement</th> <th onclick="sortTable(4)">Behaviour</th> <th onclick="sortTable(5)">Total</th> </tr> </thead> <tbody> <tr> <td>Student 1</td> <td>Bowman</td> <td>ACR</td> <td>1100</td> <td>10</td> <td>1090</td> </tr> <tr> <td>Student 2</td> <td>Fulford</td> <td>ACR</td> <td>1623</td> <td>196</td> <td>1427</td> </tr> <tr> <td>Student 3</td> <td>Netherfield</td> <td>MOB</td> <td>1507</td> <td>198</td> <td>1309</td> </tr> <tr> <td>Student 4</td> <td>Saunderson</td> <td>MOB</td> <td>1920</td> <td>326</td> <td>1594</td> </tr> <tr> <td>Student 5</td> <td>Weirfield</td> <td>RBA</td> <td>1835</td> <td>85</td> <td>1750</td> </tr> <tr> <td>Student 6</td> <td>Bowman</td> <td>RBA</td> <td>1634</td> <td>320</td> <td>1314</td> </tr> <tr> <td>Student 7</td> <td>Fulford</td> <td>AHI</td> <td>1470</td> <td>503</td> <td>967</td> </tr> <tr> <td>Student 8</td> <td>Netherfield</td> <td>AHI</td> <td>2036</td> <td>337</td> <td>1699</td> </tr> <tr> <td>Student 9</td> <td>Saunderson</td> <td>AHU</td> <td>1342</td> <td>134</td> <td>1208</td> </tr> <tr> <td>Student 10</td> <td>Weirfield</td> <td>AHU</td> <td>1575</td> <td>247</td> <td>1328</td> </tr> <tr> <td>Student 11</td> <td>Bowman</td> <td>GUN</td> <td>1575</td> <td>170</td> <td>1405</td> </tr> <tr> <td>Student 12</td> <td>Fulford</td> <td>GUN</td> <td>1416</td> <td>200</td> <td>1216</td> </tr> <tr> <td>Student 13</td> <td>Netherfield</td> <td>FNA</td> <td>1991</td> <td>488</td> <td>1503</td> </tr> <tr> <td>Student 14</td> <td>Saunderson</td> <td>FNA</td> <td>1596</td> <td>90</td> <td>1506</td> </tr> <tr> <td>Student 15</td> <td>Weirfield</td> <td>HTA</td> <td>1553</td> <td>188</td> <td>1365</td> </tr> <tr> <td>Student 16</td> <td>Bowman</td> <td>HTA</td> <td>1570</td> <td>277</td> <td>1293</td> </tr> <tr> <td>Student 17</td> <td>Fulford</td> <td>DRO</td> <td>1444</td> <td>414</td> <td>1030</td> </tr> <tr> <td>Student 18</td> <td>Netherfield</td> <td>DRO</td> <td>1702</td> <td>367</td> <td>1335</td> </tr> <tr> <td>Student 19</td> <td>Saunderson</td> <td>SPK</td> <td>2027</td> <td>387</td> <td>1640</td> </tr> <tr> <td>Student 20</td> <td>Weirfield</td> <td>SPK</td> <td>1512</td> <td>140</td> <td>1372</td> </tr></tbody> </table> <script> function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; //Set the sorting direction to ascending: dir = "asc"; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.getElementsByTagName("TR"); /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i < (rows.length - 1); i++) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; /*check if the two rows should switch place, based on the direction, asc or desc:*/ if (dir === "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } else if (dir === "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch= true; break; } } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; //Each time a switch is done, increase this count by 1: switchcount ++; } else { /*If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again.*/ if (switchcount === 0 && dir === "asc") { dir = "desc"; switching = true; } } } } </script>