concord-consortium / codap

CODAP (Common Online Data Analysis Platform)
MIT License
90 stars 38 forks source link

How to include other games? #15

Closed samreid closed 9 years ago

samreid commented 9 years ago

I'm having difficulty in adding new games to CODAP. I have downloaded sproutcore and serving CODAP locally. However, the games listed in game_selection.js like so:

    DG.GameSpec.create({
      name: "Please choose an activity!!!",
      dimensions: { width: 300, height: 20 },
      url: ''
    }),

    DG.GameSpec.create({
      name: "Cart Weight",
      dimensions: { width: 290, height: 350 },
      url: 'DataGames/JavaScriptGames/CartWeight/index.html'
    }),

    DG.GameSpec.create({
      name: "Proximity",
      dimensions: { width: 463, height: 344 },
      url: 'DataGames/JavaScriptGames/Proximity/index.html'
    }),

seem like they are being served from a remote server: http://dg.ccssgames.com/DataGames/Games

I'd like to point to localhost to load games for development purposes. Any suggestions?

samreid commented 9 years ago

Oh. It appears you can just put an absolute path. I tried:

    DG.GameSpec.create({
      name: "Molarity",
      dimensions: { width: 500, height: 500 },
      url: 'http://localhost:8080/molarity/molarity_en.html'
    }),

and it worked perfectly! Sorry to spam your issues! Closing.

jsandoe commented 9 years ago

Hello Sam,

Yes, absolute paths are the solution to this issue. Sorry for the confusion.

Just FYI, to run a Game or other interactive inside codap, it is not required to edit the GameSelection object. You can specify a game as a query parameter. The syntax is very similar. For a local version of CODAP it would be something like:

http://localhost:4020/dg?moreGames=[{name: "Molarity",dimensions:{width:500,height: 500 },url: 'http://localhost:8080/molarity/molarity_en.html'}]

We realize the syntax is rather ungainly and will be simplifying this area soon. It does mean that you don't have to modify CODAP to run an interactive within it, though. Interactives that are written according the the API described here communicate with CODAP using PostMessage calls and can be sourced from separate servers than the CODAP instance that hosts them.

Regards,

Jonathan Sandoe

samreid commented 9 years ago

Thanks so much Jonathan! I was just starting to look for a document like https://github.com/concord-consortium/codap/wiki/Data-Interactive-API, this is perfect.

Best Regards, Sam

samreid commented 9 years ago

http://localhost:4020/dg?moreGames=[{name: "Molarity",dimensions:{width:500,height: 500 },url: 'http://localhost:8080/molarity/molarity_en.html'}]

That seems like a great way to load the sim, but I am running into a JSON parse error. I also tried encodeURIComponent on it and had the same trouble. Perhaps some characters need escaping? Let me know if you want me to create a separate issue for this.

apeeyush commented 9 years ago
http://localhost:4020/dg?moreGames=[{"name": "Molarity","dimensions":{"width":500,"height": 500 },"url": "http://localhost:8080/molarity/molarity_en.html"}]

I guess this should work. I added a few " to convert it in valid json format.

samreid commented 9 years ago

That's working perfectly, thanks! No longer any need to fork game_selection.js.

I was trying to integrate a PhET Interactive Simulation with CODAP and embedded Molarity with CODAP. Here are some instructions on how to demonstrate the interoperability, for those unfamiliar with codap:

  1. follow the link above
  2. click login as guest
  3. drag the solution volume slider
  4. show the graph
  5. show the table
  6. drag the 2nd column (solution volume) to the x-axis
  7. drag the 3rd column (solution concentration) to the y-axis
  8. drag the sim sliders to see the data update

Thanks to @jsandoe and @apeeyush for your timely help--it made it very easy for me to proceed!

bfinzer commented 9 years ago

Fantastic!

Suggestions: Include the units in the attribute names, in parentheses. Then they’ll show up nicely on the graphs. Include the Solute.

I’m having a chemistry brain fart. Shouldn’t the solute have some effect on the relationship between amount and concentration? And I don’t think I would have been thrown into this state of cognitive dissonance without have the graph of concentration versus amount.

On Jan 13, 2015, at 7:49 PM, Sam Reid notifications@github.com wrote:

That's working perfectly, thanks! No longer any need to fork game_selection.js.

I was trying to integrate a PhET Interactive Simulation with CODAP and embedded Molarity with CODAP http://codap.concord.org/releases/latest/static/dg/en/cert/index.html?documentServer=http://document-store.herokuapp.com/&documentServer=http://document-store.herokuapp.com/?moreGames=%5B%7B%22name%22:%20%22Molarity%22,%22dimensions%22:%7B%22width%22:550,%22height%22:%20350%20%7D,%22url%22:%20%22http://www.colorado.edu/physics/phet/dev/html/samreid/codap/molarity/1.2.0-dev.1/molarity_en.html%22%7D%5D. Here are some instructions on how to demonstrate the interoperability, for those unfamiliar with codap:

follow the link above click login as guest drag the solution volume slider show the graph show the table drag the 2nd column (solution volume) to the x-axis drag the 3rd column (solution concentration) to the y-axis drag the sim sliders to see the data update Thanks to @jsandoe https://github.com/jsandoe and @apeeyush https://github.com/apeeyush for your timely help--it made it very easy for me to proceed!

— Reply to this email directly or view it on GitHub https://github.com/concord-consortium/codap/issues/15#issuecomment-69865319.

samreid commented 9 years ago

Thanks for the suggestion @bfinzer, I added units in this version.

Also, if you are only adjusting the solution volume then you may end up with a Solute Amount vs Concentration graph that looks like this (since the solute amount is being held constant and the volume variable is hidden in the graph): image

But if you adjust the Solute Amount (say, leaving volume fixed), you can see the linear relationship: image

Does this explain what you observed?

bfinzer commented 9 years ago

Sam,

I guess I was thinking about different solutes and and how they have different solubilities, which you would see if you add more solute than can be accommodated by the solution. I expected some kind of saturation effect to show up in the graph of concentration versus solute amount. And I thought that effect would vary from one solute to another.

Bill=

samreid commented 9 years ago

Ah, thanks for clarifying! I'm not too familiar with that chemistry. @ycarpenterphet can you comment?

ycarpenterphet commented 9 years ago

@samreid, I think I've figured out the discrepancy.

@bfinzer is correct in saying that different solutes have different solubility, resulting in the saturation behavior that we show in the simulation, with solid particles appearing in the bottom of the beaker after a certain maximum concentration is achieved.

I think the issue is that the simulation slider "Solute Amount (moles)" is indicating the total amount of solute added to the beaker (so this includes both the dissolved solute and the stuff left as a solid at the bottom of the beaker).

In the graph, however, the variable "Solute_Amount" on the x-axis shown below is only plotting the amount of dissolved solute (and not including the solids leftover in the bottom of the beaker).

As an example, if I select potassium permanganate, which has very low solubility, the data being plotted in the graph stops at 0.1 moles, even if I move the slider to higher solute amounts (notice the table values for solute amount max out at roughly 0.1): screen shot 2015-01-14 at 3 18 03 pm screen shot 2015-01-14 at 3 17 53 pm screen shot 2015-01-14 at 3 17 25 pm

There's a blip on the graph at 0.3 moles, but this doesn't seem to occur consistently as a data point if I re-plot this same data, so I'm not sure what's happening there.

I would either expect the graph axis label to be different (e.g. "dissolved solute (moles)") to accurately reflect what is currently being plotted (and distinguish it from the variable being manipulated in the sim), or I would expect a graph that shows a clear limit, as @bfinzer describes, by plotting total solute added: with saturation line

Hope that helps - let me know if I can clarify or answer any other questions.

bfinzer commented 9 years ago

@ycarpenterphet Thank you! That explains it perfectly. And I hadn't managed to produce the graph with the "blip" at 0.3.

I would definitely like to be able to show the amount added. And @samreid I would like to have an attribute for Solute. In fact, you might consider Solute as the single attribute for "parent" cases with the others as attributes of child cases. Every time the solute changed, you could move on to a new parent case.

samreid commented 9 years ago

@bfinzer it was great working with your team this week. @jsandoe & I got parent cases working in one demonstration for Energy Skate Park: Basics--I agree it would be good for other sims as well.