simplify snowman hour of code lesson and desmosify it for easy sharing.

[flannery-denny]

• [x] Swap Enter/Shift-Enter
• [x] Delay calls to parley.run() and see if we can avoid rapid-clicking that stalls the editor
• [x] make image take up full screen (see slide 15)
• [x] Various CSS glitches, in descending order of priority: input box is too talk, narrow windows cause the buttons to overlap,
• [x] would be nice to have a loaded callback handler in Repartee, so we can display a "loading" indicator the first time it loads and then hide it and run the code when it's ready. At the moment there's just a long pause on the first card, and then the call to play() gets swallowed before the editor loads so there's no output
• [x] Which name should we use in the directions we give kids? chatitor? repartee? something else?
• [x] Currently every slide has to use the code include image - can we load context essentials instead?
• [x] Currently repartee uses a smaller list of colors than pyret. Is this going to change?
• [x] Auto-Run code after each slide loads
• [x] Make a reset button that can be used on every page.
• [x] Add videoConfig
• [x] Embed repartée in old HoC infrastructure (see https://github.com/jpolitz/embed-repartee-example)

[schanzer]

@flannery-denny if there are more action items for this, can you add them to the issue? From here, I can't tell what else is left to do.

[flannery-denny]

Nothing has been done on this issue at all. It was deemed not urgent. We can discuss at our meeting.

Flannery

On Jan 3, 2022, at 2:24 PM, Emmanuel Schanzer @.***> wrote:

 @flannery-denny if there are more action items for this, can you add them to the issue? From here, I can't tell what else is left to do.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[flannery-denny]

Investigating whether https://pyret-anchor.s3.amazonaws.com/anchor/index.html will make any of this more accessible in preparing students for this. Here's the context

[flannery-denny]

@schanzer Any reason we couldn't use this same infrastructure and embed pyret or ide in it instead of wescheme?

(I would definitely pare back the content, I'm just wondering about the slide show infrastructure itself)

[schanzer]

@flannery-denny pyret doesn't support embedded mode the way WeScheme does. (Sorry if this is a dumb question, but what's "ide"? Is this the thing Joe is working on?)

[schanzer]

Ah! So it is. It might make it more accessible, but that's quite a ways in the future and will not be done for HoC this year. Let's stick with CPO for now.

[flannery-denny]

@schanzer We made a plan as a team in a full team meeting that we would explore using Joe’s new thing for hour of code. I had a meeting with him yesterday. It’ll be ready for TAs next week and ready for Shriram’s class by end of month. I’ve been playing around with it. Seems promising that we’ll want to use a combination.

On Aug 2, 2022, at 6:42 AM, Emmanuel Schanzer @.***> wrote:

 Ah! So it is. It might make it more accessible, but that's quite a ways in the future and will not be done for HoC this year. Let's stick with CPO for now.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[schanzer]

That's great to hear that it will be ready! Unfortunately, it's unlikely we'll be able to reuse the infrastructure developed for WeScheme. I'll talk to Joe and see how much work it would take.

[flannery-denny]

@schanzer This is a sketch of where we're headed

google slide draft

I don't think it's productive for me to go further with this until there's a place for me to work with it on git. if you need more details in order to sort out the infrastucture end of things lmk and I'll add it to next week's meeting.

[flannery-denny]

https://pyret-anchor.s3.amazonaws.com/anchor/index.html#:~:text=program.arr-,snowman,-.arr

[flannery-denny]

consider using desmos with pyret instead of custom w repartee if repartee.

[schanzer]

Most embedding work is now complete, modulo a few CSS questions for Joe and behavior questions for Flannery.

https://user-images.githubusercontent.com/77126/190872197-ede2ad9b-b794-44db-99c6-bc15103996da.mp4

[flannery-denny]

@schanzer

• [x] How do we/students advance from one slide to the next?
• [x] Why are there trailing ordered lists on the first slide?
• [x] How do I embed a traditional Pyret starter file on the last slide?

[schanzer]

@flannery-denny If you check in your HTML I can take a look at it. Looks like you may have some dangling or unclosed tags somewhere.

[flannery-denny]

@schanzer I updated everything that I know how to do with this file and checked in my work first thing this morning. Reminding you that I'm working on the hoc branch. Thanks for looking at it.

[schanzer]

@flannery-denny I pushed a fix to some unclosed tags in the HTML, which were wreaking havoc on browser layout.

PROTIP: Since we're working in raw HTML here instead of asciidoc, the web inspector in your browser is a really helpful place to start debugging. Here's what I see, after the fix:

You should see all the "pages" and their comments lined up neatly under the "cards" node. When things were rendering improperly, only a few cards showed up there and the rest came after the cards node. The first page to go awry is almost always the location of the first bug.

[schanzer]

@flannery-denny reset button added

[schanzer]

@flannery-denny am I correct in assuming that this is essentially done, modulo work Joe needs to do?

[flannery-denny]

@schanzer Once I know what Joe is / isn’t going to do, I will polish this. Some wording is dependent on how it’s going to work so it will definitely need another look before release.

Flannery

On Oct 4, 2022, at 1:05 PM, Emmanuel Schanzer @.***> wrote:

 @flannery-denny am I correct in assuming that this is essentially done, modulo work Joe needs to do?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[retabak]

@flannery-denny - I'd love to take a look at how this has progressed! How / where do I find it?

[flannery-denny]

@retabak you'll need to get @schanzer to help you if you want to see this... and perhaps it makes more sense to wait until it's actually all working.

It works something like the following, but I am not currently able to make it work on my computer, so I figure Ive forgotten a step in the last several weeks...

1. check out to the hoc branch.
2. build the hoc-snowman-repartee lesson (I do this by putting it in my __sample pathway
3. navigate to lessons (not distribution/lessons)
4. click on run-locally
5. open the index file from the lesson
6. expect that you should be able to navigate between the slides, but there are still things that don't work because the team is still building the infrastructure for them.

[schanzer]

@flannery-denny a few corrections:

1) there's no need to build. You can run locally right from the lesson folder. This will launch the web server in a terminal window.

2) do NOT open the html file - instead, visit the address of the Web server (it's printed in the terminal).

This is because embedding Pyret only works when served, and not when read from a local file

[schanzer]

@flannery-denny I've added a videoConfig option, along with an example slide. Do you want the videos to start playing automatically?

[flannery-denny]

@schanzer Thanks! I think it probably makes sense for the video to play automatically.

[schanzer]

@flannery-denny so, I have bad news -- I just investigated, and it turns out that autoplay ONLY works when the video is muted! Personally, I think it would be way more confusing for kids to see the video playing without audio than for them to realize they need to press play.

Thoughts?

[flannery-denny]

There is no audio for that video.

On Wed, Oct 12, 2022 at 9:47 AM Emmanuel Schanzer @.***> wrote:

@flannery-denny https://github.com/flannery-denny so, I have bad news -- I just investigated, and it turns out that autoplay ONLY works when the video is muted! Personally, I think it would be way more confusing for kids to see the video playing without audio than for them to realize they need to press play.

Thoughts?

— Reply to this email directly, view it on GitHub https://github.com/bootstrapworld/curriculum/issues/699#issuecomment-1276303607, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP4Z7TB6MUT7IFNKHYARSJDWC3FOPANCNFSM5JZY3TNA . You are receiving this because you were mentioned.Message ID: @.***>

[schanzer]

Check your speaker settings. I hear audio when I play.

[flannery-denny]

@schanzer I went back and relistened to that quicktime video snowman.mov and I'm still not hearing the audio that you are... I don't believe there is any.

I changed movieConfig to videoConfig on slide 13 where it's supposed to run and it's still not loading... Is that because it's .mov instead of .mp4 (not sure how to change this - Quicktime doesn't seem to want to let me do that)? Or is there a different explanation?

Instead of inserting an irrelevant video at the beginning of the lesson (which I've tried to remove and cannot), could you please figure out how to get the video on slide 13 to load and play? Happy to make a time to work on it together if you prefer.

Also, I've written to Joe about this, but I'm getting errors on slide 8 and 10. I know that colors like 'lightgrey' are more complex than others, but I'm not sure why the type error message would refer to red

[schanzer]

@flannery-denny I'm not sure what snowman.mov is, but the movie I added as a sample is called sample.mp4. Can you really not hear any audio in the example I made?

On slide 13, you wrote: <li videoConfig="videos/eye.mov">, but when I look in the videos folder I don't see that movie. It should play once you add it, but if there's no file it won't be able to play.

What irrelevant video are you talking about? Do you mean the one I added as a demo for you to work from? Feel free to remove the <li> that I inserted before Page 1.

I don't know what's going on with the error message, but I'll ask Joe when we meet tomorrow.

[flannery-denny]

@schanzer are you sure you're looking at the hoc branch and have done a fresh pull? I have two movies in the videos folder. one is called eye.mov and git claims I'm up to date. If you still don't see it, let's zoom and share screen.

[schanzer]

@flannery-denny absolutely positive. It's not in your github branch folder. Looks like it's on your computer, but not checked in.

[flannery-denny]

@schanzer I pushed another attempt at getting you what you need. lmk if there's still an issue

[schanzer]

@flannery-denny the video shows up and plays beautifully! And no, eye.mov does not have any audio. Feel free to delete the example video from slide "zero", since now you've got it working.

Aside from bugs in Joe's wheelhouse, is there anything else you need from me?

[schanzer]

@flannery-denny turns out that Pyret has "darkgray", but not "darkgrey" -- even though the documentation claims otherwise. Joe is working on it now, and also on throwing a helpful error message for when an unknown color is used

[schanzer]

@flannery-denny updates:

• We're going with "Parley" as the name. It's easy to read and pronounce, and seems as good as any. :)
• The color fix will come next week, along with some other small improvements
• I also removed the extra video slide, and cleaned up some of the editorCode spacing

[schanzer]

@flannery-denny I've pushed a temporary CSS hack that fixes Parley things. Eventually Parley will include them, so we can delete them from our repo. Beyond that, I think this is...done? :)

[retabak]

Can I peek?!

@flannery-denny gave me this link but it doesn't work: https://bootstrapworld.org/materials/fall2022/en-us/lessons/hoc-winter-parley/index.shtml#

What branch is this on?

[schanzer]

it's on hoc - but the link will work. I was able to take out the need for .shtml, so just go here: https://bootstrapworld.org/materials/fall2022/en-us/lessons/hoc-winter-parley/

[retabak]

Wow! i'm so pumped about this HOC! So cool!

General notes: I wonder if we should say something about how you need to fix / delete buggy code for subsequent code to be read? Assuming this activity is self-guided, that seems like the one thing that could trip students up and cause them to get needlessly frustrated / give up. Or, maybe that should be an error message that appears when it happens?

Also - why does the button that resets the editor to where it was the first time you saw any card say "end"? That doesn't make sense to me. Maybe "reset" or "start"? I thought "end" would take me to the end of the activity. I'm sure there is some reason for this that I do not understand. (This is maybe a concern for Joe, but maybe it's just me not understanding something.)

Nitpicky things:

• [ ] Slide 1 - specify where the "Update Responses" button is. I finished the whole activity and just now noticed it! Also, is this "Pyret" or "Repartee" or "Parley"? We say "Pyret" on slide 1, but on slide 13, Pyret is introduced as though it is something new.
• [ ] Slide 8 - "Defining and Composing Functions" - we should say What do you think will happen if you type head and hit "Ctrl-Enter"? Test it out. (Hitting "enter" just gets a new line.)
• [ ] Slide 13 - This slide needs some love. "So far we have been working in the chatitor version of Pyret. More complex programs get written in a different view." Kids won't know what "chatitor" means, nor will they know what "Pyret" is. (In fact, I googled "chatitor" and found NOTHING! Is that a real word?) Also, this slide is the first time kids see the word "Repartee." They might not know that they are working in Repartee.

How about instead we say, So far we have been working in Repartee, where code is evaluated as you type it. Repartee is a SOME NICE ADJECTIVE version of Pyret, a platform that allows us to write more complex code. Here you see a screenshot of our classic Pyret editor. Then remove the bullet about Repartee. And delete the extra period after the first bullet.

I would also delete "with the file pictured" from the last sentence - I think it's confusing. That's the file that will open automatically when they click the button, so we dn't need to specify.

• [ ] Slide 14 - "When you click open the file linked below" - delete "click"
• [ ] Slide 14 - just curious - why are we defining the snowman pieces behind the scenes? I feel like kids might be interested in seeing the code (and perhaps modifying it - changing hat color, carrot size). Is there a reason we are hiding this code?

[flannery-denny]

@retabak you asked for an in process peek. There hasn’t been any wordsmithing yet because the slides were made while the interactivity (and nomenclature) was still in development. Once I’m done, I’ll let you know where you can make edits.

Flannery

On Oct 28, 2022, at 2:28 PM, retabak @.***> wrote:

 Wow! i'm so pumped about this HOC! So cool!

General notes: I wonder if we should say something about how you need to fix / delete buggy code for subsequent code to be read? Assuming this activity is self-guided, that seems like the one thing that could trip students up and cause them to get needlessly frustrated / give up. Or, maybe that should be an error message that appears when it happens?

Nitpicky things:

Slide 8 - "Defining and Composing Functions" - we should say What do you think will happen if you type head and hit "Ctrl-Enter"? Test it out. (Hitting "enter" just gets a new line.) Slide 13 - This slide needs some love. "So far we have been working in the chatitor version of Pyret. More complex programs get written in a different view." Kids won't know what "chatitor" means, nor will they know what "Pyret" is. (In fact, I googled "chatitor" and found NOTHING! Is that a real word?) Also, this slide is the first time kids see the word "Repartee." They might not know that they are working in Repartee. How about instead we say, So far we have been working in Repartee, where code is evaluated as you type it. Repartee is a SOME NICE ADJECTIVE version of Pyret, a platform that allows us to write more complex code. Here you see a screenshot of our classic Pyret editor. Then remove the bullet about Repartee. And delete the extra period after the first bullet.

I would also delete "with the file pictured" from the last sentence - I think it's confusing. That's the file that will open automatically when they click the button, so we dn't need to specify.

Slide 14 - "When you click open the file linked below" - delete "click" Slide 14 - just curious - why are we defining the snowman pieces behind the scenes? I feel like kids might be interested in seeing the code (and perhaps modifying it - changing hat color, carrot size). Is there a reason we are hiding this code? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[retabak]

I saw Emmanuel's comment that maybe this issue was possibly done and was worried I missed the window Woops!

[flannery-denny]

@schanzer I've pushed my edits. When you and Joe are done addressing the things you were working on resolving (It looks like he's already fixed the "Enter to submit" issue), please push to the web and let @retabak know that it's ready for feedback.

@retabak To answer your question, it is important that this file use a teachpak because this is designed to be the first hour of coding exposure students will get and there are lots of opportunities for them to be overwhelmed by and to break the code if everything is visible (that cost far outweighs the potential gain!). The concrete improvement that has been made over the previous iteration is that we have both given them a notional machine of what is actually happening behind the scenes and the tools to be empowered to define their own values if they are motivated to do so.

In order to edit the file you will need to.

1. be on the hoc branch
2. do a git pull
3. do npm update
4. ./build-pathway hour-of-code
5. work in the index.html file of the hoc-winter-parley folder
6. view changes by opening lessons/hoc-winter-parley click on run locally
7. open a new browser window
8. type localhost:8000 into the spot where the url usually goes and the lesson will load
9. if you make changes to the file, all you have to do to see them is save the index file and click refresh on the browser window

Note: This file is written in html. If it's overwhelming, I can make changes. Just share your feedback.

[schanzer]

@flannery-denny just push fixes to the snowman image and rapid-card-switching-breaks-run.

[retabak]

Things that I noticed throughout:

• [x] Every intsance where it says to hit "Enter", it needs to say "Ctrl-Enter"
• [x] Throughout, I suggested an idea re: the "make a prediction, click here" buttons. Take it or leave it!
• [x] General question about numbered items - at first, I thought they were always things for kids to do / code / type. That seemed to be how you were using them in the first few cards. As I progressed through the cards, the numbered items were also "thinking prompts" - for instance, "Why does right-triangle need two numbers?" - with no prompt. I think I'd like to see the numbered items represent a request for a particular student action, and maybe questions are not numbered?

Card 1:

• [ ] The editor automatically runs each line of code -- Can we say actually "automatically." Maybe, "Once we submit a line of code, the Editor reads it and responds"? FD - I don't understand this feedback and @schanzer and I came up with this text together so am going to ignore it unless @retabak feels strongly.
• [x] Then click the Update responses button or hit "Enter" to re-run the code. - I'd say, "Then click the Update responses button - it's blue and in the upper left - or hit Ctrl-Enter to re-run the code." (I did the entire activity without noticing that button.)

Card 2:

• [x] What if we said, "Make a prediction then click the button to add the code to the editor and see the result." And then the button actually had some silly text on it, like, "Show me the star!" Seems more intuitive to me - and like it might slow kids down a bit / encourage them to actually make the prediction.. We can't use your suggestion here because it gives away the thought experiment
• [x] Change "Enter" to "Ctrl-Enter"

Card 4:

• [ ] I think we need to explicitly emphasize that kids need to CHANGE the code that's there, not type their revision in as a new entry. Assuming this activity is self-guided, that seems like the one thing that could trip students up and cause them to get needlessly frustrated / give up. FD The text on the slide reads: Take 1 minute to see if you can figure out how to change the code to successfully build a rectangle before advancing to the next slide. I can bold the words "change the code"?
• [x] It's a little funny to have a numerated list with one item... but I don't know what the next item might be. FD - Ignoring these comments, because numbering todos is consistent throughout the activity and sometimes there's only one.

Card 5:

• [x] On previous cards, the numbered lists were things for kids to do, and that's not the case here. FD - This is some complex coding, but hoping you'll like the rework.
• [x] Change Enter to "Ctrl-Enter"
• [x] Same suggestion here re: the button. Say: "Make a prediction, then click the button to test it out!" Then the button would say, "Swap 50 and 100!"FD - This is some complex coding, but hoping you'll like the rework.

Card 6:

• [x] same suggestion re: button
• [x ] is it possible for the bolded headings not to be indented? Right now, it looks like you forgot to ennumerate "Experiment with right-triangle"

Card 7:

• [x] Ctrl-Enter

Card 11:

• [x] numbered list with one item again FD-ignoring as with above

Card 12:

• [x] period and exclamation mark at the end of third item

[flannery-denny]

@retabak the ctrl-enter situation was a bug that joe introduced for about 6 hours and is not how it currently or should work. If you are still seeing that please report back.

Let's do a quick zoom about the rest and put this to rest together.

[schanzer]

@flannery-denny and @retabak Joe has come through with a fix for the Enter/Shift-Enter issue.

After pulling the latest version of this branch, run npm update and test as you normally would. (I've also updated the version on the web)

[flannery-denny]

@schanzer please push my last commit to the web and then close this issue.

[schanzer]

Done! Great work pushing this over the finish line