Log in
Search
  • Blogs
  • Wikispaces for education

Wikispaces for education's blogs

  • I am happy to celebrate mix and mash NZ with more examples. Especially some giving access to NZ resources (images, data). Any suggestion?

  • When searching for nice examples of mashups using javascript, I came across this timeline of Digital NZ resources. Unfortunately, I couldn't get the iFrame embed to work. I modified code provided on github to get it to work on wikispaces.

    image

    Working example at: http://widgeds.wikispaces.com/DigitalNZ+Timeline

    Compared to other examples, this cannot be added as a customizable widged to any wikispace page without me explicitly enabling your space. If interested, take contact.

    But you can embed a generic timeline in any wikispaces using the twin version that I put on dropbox. Edit page, click widget, select Other HTML, paste this code:

    <iframe src="http://dl.dropbox.com/u/24333779/exercist/digitalNZ_timeline/index.html" width="800" height="740" frameborder="0"></iframe>

    This should work on any wikispace.

  • This has been advertised elswewhere on this VLN. The NZ Mix and Mash competition has just started. You have till September 19th to submit your entry.

    The thing is that you don't need  complex technology or advanced technical skills to make great projects. It's more about having a nice idea that is within the skills of your team. 

    With wikispaces, you can provide pretty much any custom html content. This includes html and script. This makes it a good environment to try and teach how to write for the web.

    What is good about wikispaces is that it already includes jQuery. jQuery is a library that makes it very easy to manipulate page content, programmatically. I know, I just used the much dreaded "p" word. Most of us, adults, have grown up in a world were we have learned to stay away from programs because they are very complex things. Less and less so.

    jQuery, in particular, let you do quite cool stuff with minimum time, money, or infrastructure  investment. There are huge number of plugins contributed by the community. Most of them require very little adaptation (less than an hour of work) to be made to work in wikispaces.It is really worth considering using it to give mini-IT projects to teens. 

    On wikispaces, no install is required (you only need aware that you need to use jQuery instead of the $ shortcut). It is also possible to put community websites like jsfiddle or jsdo.it to good uses. It provides you with an online authoring environment and plenty of cool mini-projects and experiments contributed by the community, that you can just fork at the click of a button. You can easily set up a base project that works that students are invited to adapt and modify. 

    Some examples of mash ups projects that could easily be done with jQuery :

     And for how to link it to NCEA units:

    For instance the Unit "Analyse perspectives of people in an historical setting" could be investigating by using the photos on the National Library NZ flickr stream or to map content from digitalNZ on a timeline..

  • Live example with code here: http://widgeds.wikispaces.com/Flickr+Feed

    In wikispaces, edit a page. Click on "Widget", then select "Other Widget". In the editing window, paste the code below and replace the value under  'id: '62938898@N00' with the one of your own photostream.

    <script src="http://widgeds.wikispaces.com/file/view/jflickrfeed.min.js" type="text/javascript">
    </script>
    <ul id="basicuse" class="thumbs">
    <li>x</li>
    </ul>
    <script language="JavaScript" type="text/javascript">
    //<![CDATA[
     
          jQuery(document).ready(function(){
     
          jQuery('head').append('<link rel="stylesheet" href="http://widgeds.wikispaces.com/file/view/style.css" type="text/css" />');
         // wikispaces only accepts ul lists with list elements inside. We had to add one and now delete it before we start.
            jQuery('#basicuse').html("");
            jQuery('#basicuse').jflickrfeed({
                    limit: 14,
                    qstrings: {
                            id: '62938898@N00'
                    },
                    itemTemplate: '<li><a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /><\/a><\/li>'
            });
     
          });
    //]]>
    </script>
  • The "Other widget" option in wikispaces allow you to embed any type of custom code. Among other things, this let you user powerful javascript libraries. 

    For instance, the impressive jsxGraph library, a powerful cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. Check out their long list of examples.

    Edit a wikispaces page. Insert a Widget. Choose Other as widget type. This let you type custom html and javascript. 

    Here, we will draw this graph:

    image

    An interactive version is availble on wikispaces on this demo page. Click on the points to change their position and change the shape of the curves. 

    First, make sure you embed the jsxGraph library. This should be done once and only once on a given page. Create an other widget with the script tag or add it on top of the first jsxGraph of the page. 

    <script type='text/javascript' src='http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js'>

    Any graph is made of two parts. A zone on the screen in which to draw the graph. The code that governs how the graph should look. 

    (1) Add a division tag to define the width and height of the graph drawing area. Give it jxgbox as class and a unique name as id.

    <div id='box' class='jxgbox' style='width:500px; height:500px;'></div>

    (2) Add the script. In the initBoard function call, refer to the unique division id. 

    <script type='text/javascript'>
    //<![CDATA[
    var addPoint = function(x) {
    p.push(brd.create('point', [x,(Math.random()-0.5)*3],{style:6}));
    brd.update();
    };

    var brd = JXG.JSXGraph.initBoard('box', {axis:true,originX: 250, originY: 250, unitX: 50, unitY: 25});
    brd.suspendUpdate();
    var p = [];
    p[0] = brd.create('point', [-4,2], {style:6});
    p[1] = brd.create('point', [3,-1], {style:6});
    addPoint(-2);
    addPoint(0.5);
    addPoint(1);
    var pol = brd.lagrangePolynomial(p);
    var g = brd.create('functiongraph', [pol, -10, 10], {strokeWidth:3});
    var g2 = brd.create('functiongraph', [brd.D(pol), -10, 10], {dash:3, strokeColor:'#ff0000'});
    brd.unsuspendUpdate();
    //]]>
    </script>

    Click Save on the widget, save on the page and you are done.

  • As per an article on the wikispaces blog, you can insert complex math formulas in wikispace.

    Simply enclose the expression between [[math]] tags

    [[math]]
    \tilde{f}(\omega)=\int_{-\infty}^{\infty} f(t) e^{-i\omega t}\,dt
    [[math]]
     

    Rendering when embedded in wikispaces, math tag.

    You can refer to this article by the Art of Problem solving for a quick introduction on the available Math commands. Software like MathType exist that let you write the math expression visually.

     
  • The code to add a Google Plus Button provided by Google looks like this:

    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone></g:plusone>

    <!-- Place this tag after the last plusone tag -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>

    Wikispaces does allow for custom script content to be added with Page Edit > Widget > Other HTML. However it performs syntax checking and will remove any code that doesn't look like valid HTML. As the line <g:plusone></g:plusone> is not made of standard tags, wikispaces will remove it.

     You have to inject the plus one element manually. Here is the code:

    <!-- Place this tag where you want the +1 button to render -->
    <span id="plusOne"></div>
    <!-- Place this tag after the last plusone tag -->
    <script type="text/javascript">
    //<![CDATA[
    (function() {
    jQuery("#plusOne").append("<g:plusone></g:plusone>")
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
    //]]>
    </script>

     Click "Save". Click on the Widget again and select "Right Align"... and voila. See it in action.