Tuesday, August 13, 2019

Day 11: More Diagramming

I had my first meeting yesterday with the wonderful Mr. Chow, and holy wow you guys you need to talk to Jay. Not only did he answer my questions, and fix things that needed fixing (in my head and in my CL) but he helped me move ahead in my diagramming - this is not to say that what you're about to see is officially sanctioned by him, only that he gave some encouragement on an idea I had. If there is a mistake in it (which I already know there is) it's mine.

So here's where I am now in my diagramming. I've added the possible data types that could fill the first and last fields in a script. Since those possible data types depend on which component is involved, I've made a slideshow, with each slide corresponding to a specific type of component, eg note, input, or graph. The possibilities for the source data type of an input component are not the same as those for a graph, for example.

This is meant to help get a sense of how the CL is structured, but not go into much detail (yet) about what individual terms like "initialLatex"mean. For example, I don't yet know what "initialLatex" actually does, only that it's something that would go into the field I've labelled "Sink Data Type", so that tells me it's something to do with a component into which something is being injected. (Maybe it's something that is to be displayed in an input to prompt students? No idea.) This at least helps me not get overwhelmed when I'm reading someone else's script.

The mistake is in the "To put a script into the gearbox of" part. I'd previously felt pretty sure that the script always goes into the gearbox of whatever component is the sink. But, for example, in the cardsort (last slide), according to this sample from Jocelyn's collection, the script is in the gearbox of the actual title of the screen. So I need to think on that for a bit. Also I need to add "title" as a component.

Also, I haven't worked in yet how to show that once you've selected a certain data type for your sink, your choices for the source data type are further filtered down, because they must match. For example, if your sink data type is "number", your source data type can't be "content", but it could be "numericValue". 

Day 10: First Attempt at a How-To-Computation-Layer Diagram

I created and shared my first attempt at a CL diagram on twitter, and Jay Chow (thank heaven for Jay Chow y'all) replied:
It turns out that it's not quite accurate to say that third example defines a variable. I had misinterpreted this example from the CL doc:

I had thought that the variable m was being defined in this line, but after checking out the "try it" I realized that m had been defined within the graph, so it wasn't accurate to say that it was defined right here.

So for now I'm sticking with the ones that I know are good:

So now....I tried making up random CL things to see if they worked. Got something to work yay! I'm still not sure of when we need variables and when we don't but I think for now I'll just assume we always do and keep defining them. They need to be defined in the same place as the script that's referring to them. It's still in draft mode but here is where I'm playing around.

Monday, August 5, 2019

Day 9: Maybe I Should Just Stick to Dragging and Dropping

I'm still watching the first of Jay chow's webinars. One thing I know for sure is that having the ability to pause & re-watch is huge. (Hello flipclass.)

I'm trying to get my head around that example on screen 16:

It's easy enough to get it to automatically graph whatever rule the student types in, but I wonder:

How could I get it to only graph once the submit button is pressed? It doesn't seem to fit the When-otherwise scenario. Taking Jay's advice on writing it out in english first: When input2 is submitted then inject input2 into the graph otherwise do nothing. For the do nothing - just make the otherwise part "Type in the equation of the line that goes through these points."  I tried typing "when" and seeing what the error code told me. It said it was expecting otherwise, but then when I put that in it said it wasn't expecting that...

Went back to trying exactly what Jay was doing with the T variable, and I got it to work. Unpacking the whole variable idea again. We needed T in the graph so that as it increased in value (which is done by moving the T slider to the right), the domain of the function f being graphed got wider, so the curve appears slowly from left to right. Clear, very clear. And we needed to connect that T value with the CL by calling a variable by the same name, so that however much that variable T is in the CL, that's how much T in the graph is. So in effect, changing the value of the variable T is equivalent to moving the T slider. And if we want to increase the value of the T variable in the CL, we make it equal to the number of seconds since the submit button was pressed. Got it.

Tracing the path of T - it starts having a value on submit, which gets sent to the graph, then overrides the value of T on the slider.

Jay says: "The basic structure of CL is we create something (the sink) FROM something (the source)."  This is a good way to think of it.

Screen 20: Noticing something that has happened before. I am certain I've typed exactly what Jay typed but I'm getting these brackets (I've highlighted in grey) immediately after the timeSincePress

It doesn't seem to be a problem though, and the error was due to me mistyping timeSincePressed - shouldn't have had the -ed at the end.

I tried to make the second "when" include the current coordinates but it didn't work. Sigh.

Back to Jocelyn's collection. I'm going through it again from the beginning, one by one, to see if I can recreate them.

On example 2, the correct script was simpleFunction(table1.cellContent(1,2),"x") which also works without the x at the end. But I don't get why we don't have to put .latex anywhere like we did for example 1. The only difference between this one and example 1 was that there are 3 functions to type instead of 1, so we're using a table this time.

Maybe it IS better if I just drag and drop other peoples' stuff....

Friday, August 2, 2019


Next, I'm going to look at Jay Chow's Webinar 1 and the accompanying Desmos activities. Audrey's on a roll, baby!

I've decided that, for now, I'll abandon my so-far strategy of looking at the DA in preview mode and trying to unpack the CL before peeking at it, and instead I'm going to just watch Jay's webinar and let him unroll these things. He's a really great CL-er and he's made a lot of webinars, so he knows what he's doing.

Comment on how he is doing the webinar: First there are some screens for us to interact with, after which I see that Jay is using the screens of a DA as a presentation in and of itself - he's sharing his screen (and of course he has turned on the Anonymizer to make a safe environment), and clicking through the DA screens. I like that. Imma do that!

Screens 1-4:
We are asked to input something and nothing happens as a result. I think I see where this is going. 

At 9:38, Jay makes the case for using CL by contrasting activities without CL and with CL. (we just did 4 screens without and immediately felt the need for CL - Also this reminds me of how Christopher Danielson (@trianglemancsd) presented CL last year at the Desmos Fellows weekend (cohort 3). He said - I'm going to make you unhappy, then I'll show you something that will make you happy.)

When your students type in the input it's a static entity
Action buttons don't work
Things don't work together

The first example we are trying to add CL to is one in which we want the student to input an expression that evaluates to 4, hit the submit button, then get feedback. The feedback will depend on whether or not it's correct.

Around screen 14, I see Jay using the snapshots feature, also while he is sharing his screen. I've never used that feature, so it's nice to see it in action.

Aha at 25:01 I was wondering why the input expression hadn't been evaluating as it usually does - because it's been disabled with the built-in disableEvaluation, behind the input component. The full script is disableEvaluation: true. And that's why the gearbox for the input component is green, that's the script in there.

37:35 I see the effect of the ${} - it turns static text into dynamic text. No variable needed. Jay recommends we write out in english what we want to do BEFORE we write any script. Very good idea.

Next example screen 16: Students see a graph with 2 points on it and they are to type the equation of a line that goes through those two points, submit, and get feedback.

At around 47:00 Jay is using someone's suggestion to do two things - put the typed equation into the expresion list on the graph, and then graph it. I thought that as soon as an equation is in the expression list, it's automatically graphed? Why do we need to ask it to graph it? This turns out to be that we want the graph to be revealed slowly, as a result of additional interaction from the student. See "Whoah" below.

Also, I see a lot of auto-complete happening as letters are typed - very helpful.

To make a function, use the built-in function thingy? In the graph gear, the sink is indeed function: ("f") but the name f has already been typed into one of the graph boxes. Needed to label the input and use latex as source type.

At 52:04 script at this point is
function("f"): input2.latex
but there is an error message:
Sink "function" expects a function but got a string.
So input2 is currently being interpreted as a string, even though the source data type is latex. I'm not sure why that is happening. But based on examples I've seen from Jocelyn's collection, I bet it needs simpleFunction maybe? Yup.

Now it's:
function("f"): simpleFunction(input2.latex)
Jay: "I'm gonna make that function from the latex...in this case it's gonna look for x"

So I'm noticing a new level here - in input2.latex, we still have the syntax sourcelabel.sourcedatatype but it's in brackets that go with the built-in function called simpleFunction. And we need this built-in because otherwise the source (called input2, which remember is the equation typed in by the student) will be interpreted as a string (text), and the graph sink doesn't accept that type of data.

This made me go back to the CL doc and look up Graph. Question - what do the subheadings "Sources" and "Sinks" mean here? That these are all the types possible when the graph is a source? Or all the types possible for the graph's sources when the graph is a sink? 

Back to Jay. Next step is to stop it from graphing until submit has been clicked, so we'll need to use that input2.submitted thing. Last time we used that, it was part of a when-otherwise structure.


So it's not at all like last time. It's that as soon as the student clicks submit, the curve is slowly revealed as the seconds tick by. To do this:
1. A variable T (for time) had to be introduced into the graph, and its values restricted to x < T , which means that as you move the T slider, the graph is slowly revealed from left to right. (This was later tweaked to x < T - 10 to make the graph start showing at -10 instead of starting at the origin.)
2. To link the CL to the T in the graph, a variable T had to be defined in the CL. The variable was defined in one of the familiar ways like this:
number("T"): timeSinceSubmit 
which kind of makes the submit button a source for the variable T. As soon as that button is pressed, a timer is started at 0, so there's now a variable T whose value is 0, and as the timer continues, the value of T increases. This makes the line start graphing on the left, and slowly be completed. So a student doesn't know right away if they're right, but they can pretty much predict, and even change their answer if they want.

I HAVE BEEN WONDERING WHAT THE HECK THAT TIME-SINCE-SUBMIT WAS ALL ABOUT FOR OVER A YEAR!!! It makes animation happen as soon as a student clicks the submit button wut!!!

Stopping at 58:00 because I need to step outside and look at how this learning has unfolded so far. My ultimate goal is to help others learn this, so I need to figure out what worked for me.

How I’ve learned so far:

Read, looked at examples, re-read, tried things, and re-re-read, all the while documenting observations and questions on my blog. Some of the questions got answered in the same day, in which case I wrote the answer in italics next to the question. Those that didn’t, I bolded (thanks for that idea @geonz.) Some of those bolded questions I remembered on later days and went back and answered, but others I picked up later after deliberately re-reading my posts. The bigger ones, I just put a note on “answered in later post” and put that whole thing in a subsequent post.

Next I watched Jay Chow's webinar. As I watched, many questions were answered, (what are ${} for ? – it changes something from static text to dynamic text, just like objects in GeoGebra) and many observations were confirmed (when you select latex in an input it automatically displays the math expression properly and evaluates it without any need for CL – also found out how to turn it off!).

But here's what I noticed about how I learn:

I needed to have already asked those questions or observed those things in order for them to have meaning for me as I watched the webinar.

That probably makes me...human.

Thursday, August 1, 2019

Learning CL Day 7: Coolcoolcool

First I'm going back over my previous posts to check for unanswered questions, which I already went back and bolded a few days ago so I could find them easily.

On day 1: I wondered about the word script in this line:
content: note3.script.greeting
and it reminds me of something I wondered about yesterday, and that is the seeming interruption of the sequence sinktype: label.sourcetype with words like script, or simpleFunction.

On day 2: I wondered about the example under the heading "Sources" involving latex and variables, and I remember starting to feel very anxious right around then. Here's what I said:
content: "
You entered: ${l}
which evaluates to: ${v}"
Earlier in the script the variables v and l are defined:
v = exp5.numericValue
l = exp5.latex
and both those variables belong to exp5, which is the name of the input. So does this mean the exp5 is the source here? I typed 4^2 into the input and it got injected into the note AND the input. Soooooo the input is the source and the sink here?
Now I think I know a bit more about what was happening there. So hmmm. What gets typed into the input (labelled exp5) is displayed in two places - obviously right in exp5, but also in the note. So it seems true that the input (exp5) is both a source and a sink. But whatever gets typed is also a source for the note, which explains why the script is behind the note's gearbox. But now I'm wondering what is making the 4^2 to be displayed properly AND get evaluated right in the input box? I did an experiment and deleted the note completely, which means there is no longer any CL or script. I typed 4^2 and this happened:

Which tells me that the lovely folks at Desmos take care of that without any CL being necessary. As soon as you select f(x)math for a note, it interprets what you type as latex, and it evaluates it. 

I know that I knew that already on some level, but NOW I REALLY KNOW IT.

On day 3: This is where I first encountered simpleFunction. Hopefully today its placement in the script will start making more sense.

All the other days had no open questions, so I'm ready to move on.

I feel like I need to re-read the CL doc, because I had stepped away to try other things out and immerse myself in examples. Time to go back and un-overwhelm myself, and to get a better handle on that secret sauce: Variables.


So you can call a variable anything I guess, and you define it by what's on the other side of the equals sign. You can have something in quotations, like:
greeting = "hello, world!"
Or it can be whatever's in another component (which is the source for that variable), which has a label, like:
v = exp5.numericValue
in which case we need to also specify the data type of that component (or source) that we want to extract, because there are other types, like:
l = exp5.latex
You can also define a variable right inside the script for a sink, without any equals sign, but using brackets and quotations, like this:
number("m"): exp1.numericValue
which was in the guess-the-slope-of-this-line example, but in order for things to work, the variable m had to be in the graph itself, as y = mx. So one way or another, there has to be an equals sign involved in the definition of a variable.

Another new word I see in this section is "keyword", in this example:

I wonder if "keyword" has a specific meaning in the CL syntax world?

Also I still feel unsure of when a variable is needed, and when it's not.


Aha. "We have a few built-in functions for interpreting sources and converting between data types." Perhaps this is where those seeming interruptions (script, simpleFunction) come in. From the examples, it looks like these built-in functions go into the script after the equals, then are followed by brackets, which contain the expected sourcelabel.sourcetype. However, all the examples are variable definitions, so I'm wondering if these built-ins can be invoked for sinks as well?


This seems more familiar, maybe because I've recently been putting a lot of Conditionals in my GeoGebras, which uses the If-then-else structure, equivalent to when-otherwise. Did the Try it preview first. The student enters a number in the input, and  a message, entirely text, no numeric part, is immediately displayed in the notes above it. But what message is displayed depends on the number input. So let's see if I can predict any of the the script:

The source is the input box, so that must be labelled exp1 or something.
There must be a variable defined for whom the source is exp1, like n = exp1.numericValue .
f(x)math must be selected on the input
There must be script in the note's gearbox something like content."text message" and there must be a few when lines for different values of n.

Checking: The input is labelled "number" instead of note1, ok.
I got the variable definition syntax right.
f(x)math is indeed selected.
I was right about the content dot part and the whens. Yay! Also, the various text messages are enclosed in quotation marks, and a built-in "isUndefined(n)" is also there to display nothing when whatever was typed in wasn't a number.

Getting somewhere, coolcoolcool!

Tomorrow, I'll start watching Jay Chow's webinars.