Jump to content

Search the Community

Showing results for tags 'html widget'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Support
    • Support
    • Common Questions
  • General
    • The Frog Academy
    • General chat
    • Showcase
    • Webinars
  • Technical Forums (How do I...?)
    • Learn / Play / Progress
    • Coding

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Found 2 results

  1. Hi, I am trying to create a widget that is able to pull the Total Positive Behaviour Points into a variable, the end result is we will use an if statement to display a specific image depending on a number of points the student has. I have started by testing with the HTML widget. using the below code to see if I can use the behaviour.getBehaviourTotals API to get the total points this year for the user, however, it is not working. <script> var $ap,user; //Create a div, and give it a unique ID $ap = $("div", { id: Frog.Utilities.generateSimpleID() } ); $ap.html( '<b>Your House Points:</b>'+ '<table clase="table" id="your_points">'+ '<tr>'+ "<th>This Year</th>"+ '</tr>'+ '</table>' ); // Use Frog's API to get the logged in student user = FrogOS.getUser(); // Use Frog's API to get Behaviour points Frog.Model .api('behaviour.getBehaviourTotals',{ Student_uuid: user.uuid, }).done(function(behaviourResponse){ behaviourResponse.data.pos.year(function(work){ $ap.find('tbody') .append( '<tr>'+ '<td>'+ data.pos.year+ '</td>'+ '</tr>' ); }); }); arguments[0].append($ap); </script> any advice appreciated. Phil
  2. Hi We are one of the schools that gets the release slightly earlier and it appears to have messed with the HTML Carosuel widget in terms of ordering the files alphabetically. Is anyone able to help me amend the HTML code so I can see the files in the order that I load them? It is causing havoc with a number of my sites and I still much prefer this system than the new Image Carosuel widget. <style> .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } .carousel-inner img { max-width: 100%; height: 300px; margin-left: auto; margin-right: auto; min-width: 300px; } .carousel-arrow-left, .carousel-arrow-right { top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 15px; margin-top: -15px; } .carousel-arrow-right { left: 35%; border-left-color: #FFFFFF; } .carousel-arrow-left { right: 35%; border-right-color: #FFFFFF; } </style> <div id="carousel_staff_dash" class="carousel slide carousel-fade col-lg-8 col-offset-2"> <ol id="filedrop-slide-show-count_staff_dash" class="carousel-indicators"> </ol> <div id="filedrop-slide-show-img_staff_dash" role="listbox" class="carousel-inner"> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#carousel_staff_dash" data-slide="prev"> <span class="carousel-arrow-left"></span> </a> <a class="right carousel-control" href="#carousel_staff_dash" data-slide="next"> <span class="carousel-arrow-right"></span> </a> </div> <!-- This section brings back a list of the file names, uncomment if you wish this to be displayed <ul id="filelist"></ul> --> <script type="text/javascript"> $('.carousel_staff_dash').carousel(); var baseURL = Frog.Utilities.getBaseUrl(), // Change fileDropUuid to the UUID of your file drop widget fileDropUuid_staff_dash = 'A89C0DFE20028A6D14CFCFE101E98F01261AD9CCABAA75FD' ; Frog.Model .api('filedrop.get', { filedrop: fileDropUuid_staff_dash }).done(function(filesResponse) { var $fileList = $('#filelist'), $slideShowCount = $("#filedrop-slide-show-count_staff_dash"), $slideShowImageContainer = $("#filedrop-slide-show-img_staff_dash"), fileCount = 0; 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 (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) { if ($fileList.length) { // This only runs when you have uncommented the the HTML code above // This code adds file names to the ul#filelist $fileList.append( $('<li>').text(file.file.name) ); } $slideShowCount .append( $('<li>') .attr('data-target', 'Carousel') .attr('data-slide-to', fileCount) .addClass(function() { if (fileCount === 0) { return 'active'; } }) ); $slideShowImageContainer .append( $('<div>').addClass('item') .addClass(function() { if (fileCount === 0) { return 'active'; } }) .append( $('<img />').addClass('img-responsive') .attr('src', baseURL + '/app/file/resource/' + file.file.uuid) .attr('align', 'center') ) ); fileCount++; } }); }); </script>
  • Create New...