Jump to content

Recommended Posts

Hi

We use SIMS and cover lists are generated as HTML files. We used to be able to pull this into Frog 3 via Frog web, but can't do that any longer. It was suggested that I created a file drop and dragged and dropped the HTML files into it, placing an HTML widget above it and asking it to displace the files in file drop. Done that, and it works.... BUT the files, whilst dated chronologically don't display that way. eg 160916, 170916, 180916, 200916, 210916, 220916 display as 200916, 210916, 220916, 160916, 170916, 180916 which is really frustrating.

Does anyone have any HTML code I can add in that woud fix the order in which it is shown?

 

<div id="coverpage"></div>

<script type="text/javascript">

var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = '70BDB7422002874EC49D5FBFB7EEAC03C6C22C9CB651A4D8';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#coverpage');
        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['html','htm'].indexOf(file.file.ext.toLowerCase()) > -1) {
                     console.log(file);
                    // This only runs when you have uncommented the the HTML code above
                    // This code adds file names to the ul#filelist
                    $fileList.append(
                      '<iframe width="800" height="300" style="margin-left:auto; margin-right:auto;" src="'+  
                      baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext +
                      '"></iframe>'
                    );


            }
        });
    });
</script>

 

OR
Anyone got a better way of doing this? I am not popular with the teaching staff at the moment :(

Link to post
Share on other sites

Hi @Sue Busher

 

Try this:


<div id="coverpage"></div>

<script type="text/javascript">

var baseURL = Frog.Utilities.getBaseUrl(),
    myCoverArray=[],
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid = 'BF6DD930200280DA4017FF1E53A2210D7607BA4C89189C5F';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid
    }).done(function(filesResponse) {
        var $fileList = $('#coverpage');
        filesResponse.data.resources.forEach(function(file, index) {
            // Check whether the file is one of these filetypes; Want to add more? Add to the array
            if (['html','htm'].indexOf(file.file.ext.toLowerCase()) > -1) {
                    myCoverArray[index]=[file.file.name,'/app/file/resource/' + file.file.uuid + '.' + file.file.ext];
            }
                     
        });
        myCoverArray.sort();
        for (var i = 0; i < myCoverArray.length; i++) {
            //console.log(myCoverArray[i][0]);
            $fileList.append(
                      '<iframe width="800" height="600" style="margin-left:auto; margin-right:auto;" src="'+  
                      baseURL + myCoverArray[i][1] +
                      '"></iframe>'
                    );
        }
    });
</script>

 

Link to post
Share on other sites

OK. Despite my post ages ago, we didn't quite get it working how we'd have liked and I figure that other schools must have faced / fixed similar issues.

So SIMS generates an HTML file and places it into a folder on our network.

Our ideal would be for the system to automatically display what's in that folder on the network (rather than us having to upload it into the file drop widget) and for it to display as a series of hyper links e.g. :

Cover for this coming week

Monday, 30 Apr 2018

Tuesday, 1 May 2018

Wednesday, 2 May 2018

Thursday, 3 May 2018

Friday, 4 May 2018

Saturday, 5 May 2018

Sunday, 6 May 2018

All of the dates are the files uploaded in the file drop widget, which when clicked on would open up.

Has anyone created anything like this? Is it at all possible? Would really appreciate people sharing their 'cover pages' on Frog.

Thanks in advance.

Link to post
Share on other sites
6 minutes ago, Sue Busher said:

@Simon Law @pconkie

As you are both so helpful, I wondered if you'd come across anything like my conumdrum above?

Well, if your description of the problem is correct, the file is dropped onto a network drive, so could you not drop a network widget onto the page, displaying all the files in that directory, which you could then open ..... or am I missing an important piece of the jigsaw? 

Link to post
Share on other sites

@Simon Law Its so hard to describe. I am effectively after a menu which when clicked on would open the files. SIMS creates all these HTML documents and a master menu, if I use file drop, it doesn't display the master menu and shows all the documents - which is a bit overwhelming as we are a large school. However, as it wouldn't be me updating it every week, it would  need to be very simple to update. I can't drop the files as it contains personal data. Do you know how other schools have addressed this problem?

Link to post
Share on other sites
36 minutes ago, Sue Busher said:

@Simon Law Its so hard to describe. I am effectively after a menu which when clicked on would open the files. SIMS creates all these HTML documents and a master menu, if I use file drop, it doesn't display the master menu and shows all the documents - which is a bit overwhelming as we are a large school. However, as it wouldn't be me updating it every week, it would  need to be very simple to update. I can't drop the files as it contains personal data. Do you know how other schools have addressed this problem?

I think I see the problem better now.

I know I am thinking outside the Frog, but if a link could be made to open a new browser window that opened up the master menu, then you would then be able to view the day files by clicking on one of the links.

eg 

<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

where S is the network drive and the path goes to the main menu

Or is the main menu not usable as a index page?

Link to post
Share on other sites

Hi @Sue Busher

@Simon Law suggestion is the simplest and most sensible approach. Although of course it won't work for staff checking for cover at home before coming into school.

If you are happy that somebody continues to upload the htm file to the filedrop every day, then I have the following suggestion.

Capture.PNG.c9682ff3caca3b5ab734c50cf30910e2.PNG

Use javascript to build the weekly menu that you want.  Each Sunday the menu will change automatically to show the new week.

You can get rid of the bullet points with some css if you like and we could develop the menu to show previous and future weeks,

Clicking on the link shows the cover from the filedrop that it has been uploaded into

Capture3.PNG.8df03e2ef6839bfeee8b44f1ab4b0ef2.PNG

If the cover file has not been uploaded yet......

Capture2.PNG.e1d9a239661624597a30387dc4b6f4ac.PNG

 Code follows....

Edited by pconkie
Link to post
Share on other sites
<div data-name="cover"></div>

<script>
    var baseURL = Frog.Utilities.getBaseUrl();
    var fileDropUuid = '8699F48D20028AEE0C759F6DDDD9DC08FBC798FC781A69D6'; 
        
    var today = moment();
    var daysSinceMonday = today.isoWeekday() - 1;     
    var thisMonday = today.subtract('days', daysSinceMonday);
    $('[data-name="cover"]').append("<h3>This Week's Cover</h3><ul>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("</ul>");
       
    
    $("a[data-type]='coverlink'").die("click");
    $("a[data-type]='coverlink'").live("click", function () {
        var fileToFind = $(this).data("id");
        Frog.Model
            .api('filedrop.get', {
            filedrop: fileDropUuid
        }).done(function(filesResponse) {
            var found = false;
            filesResponse.data.resources.forEach(function(file, index) {
                if (file.file.name == fileToFind) {
                    found = true;
                    window.open(baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext);
                }
            });
            if (found == false) {
                alert("No cover.....yet!");
            }
        });   
    });  
</script>

Don't forget to change the filedrop uuid back!

Link to post
Share on other sites

Some explanation for those wishing to amend

//div for adding our menu to the page
<div data-name="cover"></div>

<script>
  //gets the domain name of your frog server - used to create link to cover file later
    var baseURL = Frog.Utilities.getBaseUrl();
//uuid of the filedrop (that is hidden on the page) that contains the uploaded cover files
    var fileDropUuid = '8699F48D20028AEE0C759F6DDDD9DC08FBC798FC781A69D6'; 
      
//get todays date
    var today = moment();
//how many days ago was last Monday? Hopefully Monday = 1 and Sunday = 7
    var daysSinceMonday = today.isoWeekday() - 1;   
//get last Mondays date
    var thisMonday = today.subtract('days', daysSinceMonday);
//add the title to the div
    $('[data-name="cover"]').append("<h3>This Week's Cover</h3><ul>");
//add the link for Monday etc to the div
//key here is that the data-id tag is going to contain the filename eg. CV040518 which we will try to match later
//data-type is used to identify the link as a special cover link so that we can add the onClick instructions
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("<li><a data-type='coverlink' data-id='CV"+thisMonday.add('days',1).format('DDMMYY')+"'>"+thisMonday.format('dddd DD MMM YYYY')+"</a></li>");
    $('[data-name="cover"]').append("</ul>");
       
//this next line stops the live event being added multiple times if you move from live to edit and back again in frog
    $("a[data-type]='coverlink'").die("click");

//these are the instructions for what to do when a link is clicked on
    $("a[data-type]='coverlink'").live("click", function () {
      //pull the data-id out of the link and use it to match against a file name in the filedrop
        var fileToFind = $(this).data("id");
      //access the filedrop api using the uuid of our filedrop
        Frog.Model
            .api('filedrop.get', {
            filedrop: fileDropUuid
        }).done(function(filesResponse) {
            var found = false;
            filesResponse.data.resources.forEach(function(file, index) {
              //loop through all of the files in the fildrop and see if the file we are looking for is there...
                if (file.file.name == fileToFind) {
                    found = true;
                  //if it is open a new windoe/tab and show us the bad news (cover)
                    window.open(baseURL + '/app/file/resource/' + file.file.uuid + '.' + file.file.ext);
                }
            });
            if (found == false) {
              //if after trying every file we have no match displaya sutable message to the user
                alert("No cover.....yet!");
            }
        });   
    });  
</script>

 

Link to post
Share on other sites

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 

<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>
Link to post
Share on other sites
1 hour ago, Sue Busher said:

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 


<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

Hi @Sue Busher your html above should work, however, Frog may hijack the clicking of the link in which case

<span onclick="window.open('file:///S:/Path/to/Your/MainMenu.html', '_blank')">Weekly Cover</span>
or
<div onclick="window.open('file:///S:/Path/to/Your/MainMenu.html', '_blank')">Weekly Cover</div>

may yield results

Link to post
Share on other sites
2 hours ago, Sue Busher said:

@Simon Law @pconkie

Thank you so much guys. Our preference is as Simon suggests as effectively once the files are moved into the appropriate folder its job done.

So if I put a HTML wigdet on the page, together with a hidden network folder. would the code you suggest (providing I rename it to match our network drive and the menu file), the main menu HTML file would appear?

 


<a href="file:///S:/Path/to/Your/MainMenu.html" target="_blank">Weekly Cover</a>

You won't need a hidden network folder widget.  And you should put some text on the page explaining that nothing will happen if they click on the link at home.  I've always found that its better to explain that something is by design rather than have them think frog is 'broken'.

Link to post
Share on other sites
5 hours ago, Sue Busher said:

@pconkie

Why won't I need a hidden network file?

 

@Simon Law  Thank you - will give it a try.

Sorry Sue, I thought you were talking about hiding a network files widget on the frog page where you are going to have these links.  Now i'm thinking you might mean a hidden network share?  So staff will need access to:

S:/Path/to/Your/MainMenu.html

But you won't need to have a frog network widget pointing at this on the page.

Link to post
Share on other sites
6 hours ago, Sue Busher said:

 

I have been asked to get our new website live in the next day or so, but this is still holidng is up. 

I am confused about what I need to do (or my IT colleagues). Can you help @Simon Law

 

Hi Sue,

I have looked at your cover site and there seems to be several attempts to use a FileDrop and a link and a network drive widget.

The links will not work as the browser forbids you to open files on your system from a web page.

The FileDrop has no files, so I can't see it working, I have changed the HTML widgets to use the right FileDrop

In setting the above, the save removed the network file share and directory, so that will need setting again.

So, to move forward, add the files to the filedrop so we can see if we can get the HTML widget working,

Reset the Network Widget to point to the MIS directory, so we can see if you can use the index file in there

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Sean_M
      Is there a bit of html I can add to a page to autoplay videos in the Media widget on page load?
       
      Many thanks
      Sean
    • By Stuart Green
      We would like to create a widget for displaying achievement point totals/leaderboards in a similar format to PictoChart (Which we currently manually update via google sheets).
      The information is available in SIMS so it would save schools time and effort and be an excellent way for students to engage with Frog. 
      I have pasted a copy of the points page (with PiktoCharts) to help describe what we are after. They are also nicely animated! Does anyone have the skills to be able to attempt something in Frog Academy?

    • By Graham Quince
      Some of you have already spotted this tutorial, but we've just updated it to reflect feedback from schools.
      You can now use the same code 'hack' a menu to open external links, subpages and even sites
      https://www.frogeducation.com/community/tutorials/frogcode-tutorials/external-links
    • By K.Ermit
      Hi,
      I have been provided with this code from Linguascope, but it doesn't work in the HTML widget.   
      <script language="javascript" src="http://www.linguascope.com/link/login/linguascope_login250x250.js"></script> Can anyone help please?
    • By K.Ermit
      Every time I add in a text widget,, I have to resize the text, as it starts too small, is there a way of setting the size be default?
×
×
  • Create New...