Add only 1 line to incorporate new WebApp.

12 views
Skip to first unread message

Charles Cossé

unread,
Jun 18, 2017, 1:25:03 PM6/18/17
to NetDispenser
Greetings All,

Add this one single call:
    parent.showCollectCB();

to any html activity located _anywhere_ on the web in order to participate in the NetDispenser ecosystem.

It's funny how things work out, in this case it's funny that a hack I did to quickly import apps to NetDispenser for PyCon turns out to provide a super-simple solution to integrating any web app (activity) to the system.  You see, in the days before PyCon I realized that I wasn't going to have enough time to "bring-in" several activities from the Sugarizer project.  But I really wanted a few of them, and I wanted them to actually work when I launched them ... so I wrapped _all_ activities in iframes.  It was a hack at the time, now it's a clean / minimalist solution to a seemingly ugly problem. 

So from your dashboard you launch an app.  You see the css animated transition as the iframe expands like a modal window to cover your dashboard and run the activity inside.  These activities currently being called and run-via-iframes at www.creditfeed.me at the moment are all located on remote servers, they're just running in iframes.   So the dashboard window is the parent window to whatever's in the iframe.  Thus, when the user reaches the goal of the activity, the activity just needs to make the above call, which will show a hidden button which, when pushed, will close the iframe and collect the credits.  The button belongs to the parent window, it's just hidden (display=none) until some action occurs, then the (remote) activity calls "try{parent.showCollectB();}catch(e){;}" and everything that needs to happen has happened.

This is a bare-bones, minimalist solution to answer the question:  What is the absolute most simple/minimal way to add a new activity?

You could try this out on www.creditfeed.me logged-in as parent.  Just create a new app of the "Now Read This" type (need to change name to "Article Reader").  Now click the gear icon on top of the assignment object.  Note the red exit button in bottom right corner.  There's a gold, hidden "collect button" just above it.  When you hit the big orange "Next" button the activity calls parent.showCollectB().  When you push the button you are awarded credits.  (actual incrementing of credits not implemented yet).

--------------------
Example:

You have an app at mydomain.org/myapp.html

Edit this section of this file with your apps url.

Add your app to the dropdown list right here.

Submit your 3-5 lines back to GitHub and voila!  Your app is part of NetDispenser, kids will get 1800 credits for completing it.

--------------------

I love it when huge problems collapse to nothing.  This is one of the biggest collapses I can recall.  Just had to add a hidden button and a one-line callback.  I can think of a lot of more complicated solutions.

Does anyone see anything wrong with this? 

Best to all,
-Charles

kirby urner

unread,
Jun 19, 2017, 11:40:09 AM6/19/17
to NetDispenser

So just to clarify in my own head, and maybe for other readers:

Is it that you can reach out and wrap an activity with a pre-set number of points for completion whether or not the target site has any awareness of the credit feeder?

Sounds more like this is a way for developers to make a simple function call to award credits, but how many?  What's to prevent a collusion wherein simply clicking a button rewards with huge amounts of Internet time, leading to inflation?

I think the parent-teacher programmers in charge of a specific device need to determine the "reward schema" for credit feeders of their own choosing?  My kids might get 100 points for completing a certain geography puzzle, whereas in other families they get 1000s?

Kirby

Charles Cossé

unread,
Jun 19, 2017, 1:57:40 PM6/19/17
to NetDispenser
Hi Kirby,


On Monday, June 19, 2017 at 9:40:09 AM UTC-6, kirby urner wrote:

So just to clarify in my own head, and maybe for other readers:

Is it that you can reach out and wrap an activity with a pre-set number of points for completion whether or not the target site has any awareness of the credit feeder?

No, the remote activity must call parent.showCollectCB() when the goal is reached.  But only that 1 line, and could be wrapped in a try/catch so that it works outside/inside of NetDispenser. Also the remote app can remain remote. This could even be arranged for activities which implement a more complete parent configuration dashboard (which would be local to the server), but still no need to force the app to the server.  That leads to a grow-only blob of activities in some subdir, of course, and then the need to manage them, whereas this keeps it to one copy -- someone else's copy.  I haven't worked out details beyond basic capability, but if we stick with iframes always wrapping activities then am confident we can achieve whatever we need while preserving that.

 

Sounds more like this is a way for developers to make a simple function call to award credits, but how many?  What's to prevent a collusion wherein simply clicking a button rewards with huge amounts of Internet time, leading to inflation?

I think the parent-teacher programmers in charge of a specific device need to determine the "reward schema" for credit feeders of their own choosing?  My kids might get 100 points for completing a certain geography puzzle, whereas in other families they get 1000s?

 In my experience a 30 min reward has always been the perfect length ... not too much, not too little.  During my time using variants of this system, for example, I don't think I ever awarded anything different from 30 min.  But, I think it can still be made configurable while keeping the activity remote.

-Charlie


Kirby

Charles Cossé

unread,
Jun 23, 2017, 9:20:25 PM6/23/17
to NetDispenser
So there is the cross-domain issue with what I proposed.  My experiment neglected to make any cross-domain calls, hence its success. 

However, today I was studying this nice d3.js game and decided to integrate it quickly, as it had a simple score.  First I forked it to our GitHub project here. Then I modified the scoring function in app.js lines 73-87.  Then I added a line to handle the new assignment type of "color-linez" ... html and javascript. The solution to the cross-domain call was solved by having the child (iframe) code send only a message to the parent ... which is allowed ... and the parent listens for the message ... and then does the same thing as if it had just been a callback. 

So now there's a new little activity at www.creditfeed.me named "color-linez" (goal is to get 5 colors in a row).  The game itself I forked to github and enabled github pages on it, so it's very much cross-domain, and working fine.  You can try it at www.creditfeed.me as a parent.  The gold "collect" button will display in the lower right once you get your first 5 dots-in-a-row. 

-Charles

Charles Cossé

unread,
Jun 29, 2017, 2:43:46 AM6/29/17
to NetDispenser
Did you know that it's possible to do AJAX without a server?  Google Chrome listens for xhttp.status==0 for file requests (vs 200 for http requests).  FIrefox only seems to allow 200.  Soln: (200||0).   This is a great way to load a file into JavaScript.  Another way I know is to put your <html> into a Javascript variable in a .js file and include the .js file to have access.  Yet another way is to use w3.includeHTML, which I gave up trying to use in conjunction with d3 and Chrome at the same time.

------8<-------

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script>
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {

      //http://forums.mozillazine.org/viewtopic.php?f=25&t=1134615
      if (xhttp.readyState == 4 && xhttp.status == (200||0)) {

                console.log("got response")
                document.body.innerHTML=xhttp.responseText;
      }
            else console.log("no response")
  };

  //https://stackoverflow.com/questions/7374911/reading-file-with-xmlhttprequest-results-in-error-console-entry
  xhttp.overrideMimeType('text/plain');

  xhttp.open("GET", "./some.dat", true);
  xhttp.send();
</script>
</head>
<body>
</body>
</html>

------8<-------
Contents of ./some.dat

1,2,3

Lionel Laské

unread,
Jun 29, 2017, 4:49:24 AM6/29/17
to NetDispenser

I know that but there is some limitations.
For security reason, AJAX requests on local files need some specific authorization on the browser.
See here for example.

      Lionel

Charles Cossé

unread,
Jul 6, 2017, 4:37:43 PM7/6/17
to NetDispenser
Hi Lionel,

I did not realize that you had posted this to here, i.e. thought it was an email.   But I was just thinking back to the use-case I had in mind, which was that I had been taking data through this experimental app, by swiping L-R, and it was taking quite a while to build-up statistical results that I was aiming for.  And, if I wanted to change something in the app after already started collecting data, then I wanted to be able to save and reload the data, just locally.  And as elegantly as possible, which meant hopefully something better than pasting my data back into a div to "reload" it.   So the AJAX local-load was what I was after, though there is still no good way to write the data, even locally, without a server ... (is that still correct in 2017?!) Also, I may have known once upon a time, but I was surprised that AJAX could be done at all without a server.  I guess the browser just steps-in as the server in the case of file:// urls. 

@Lionel, I have another question about .xo files that's related to this thread, if you don't mind me asking it here.  I'm wondering if bundling in .xo packages makes application less portable?  I tried like crazy to get TuxMath working using .xo files with no luck, but I think the system files below the Sugar platform support all versions of TuxMath just fine, so is the .xo packaging making unnecessary requirements? 

That's actually why I never got involved with OLPC, to tell you the truth -- because when OLPC and Sugar were together in 2007-ish, Python and PyGame were already installed on the OLPC laptops and things that I had already written ran just fine on there.  I thought that was great, but I objected to the whole idea of putting things in .xo packages.   And it is actually a second package manager, because the OLPC already has on IIRC, but I'm not sure about facts here.  Nonetheless, I'm trying for almost the exact opposite in terms of ease-of-participation and platform-specific requirements, and I've always wondered about my question above ... including to know whether I'm even correct etc.  How does anyone else see all that?
Reply all
Reply to author
Forward
0 new messages