Closed joystraub closed 8 months ago
That color coding is very cool @joystraub! Thanks for sharing :)
@schanzer
@flannery-denny and @joystraub
is confusing to some - they prefer to compare it to an example that looks like what they will be coding in.
On Thu, Feb 29, 2024 at 5:17 PM Emmanuel Schanzer @.***> wrote:
@flannery-denny https://github.com/flannery-denny and @joystraub https://github.com/joystraub
- It's possible to color the circles using CSS in the lesson plan. It's also likely we could have the colored circles make their way into the slide decks, using the same mechanism we use now for tables. Coloring the code, on the other hand, is going to be virtually impossible.
- No objection to using images in the lesson plan, as long as we're OK with the fact that it will be (slightly) harder to change them in the future
- I would really rather use the sketch for now. It works for both WeScheme and Pyret, and is flexible enough that it may yet survive some major changes coming to CPO in 2025 or 2026. @joystraub https://github.com/joystraub , is there a concrete need to have the screenshot look exactly like the editor? Is this a nice-to-have or a must-have?
— Reply to this email directly, view it on GitHub https://github.com/bootstrapworld/curriculum/issues/1913#issuecomment-1972269373, or unsubscribe https://github.com/notifications/unsubscribe-auth/BDIFPR5LMJBMUFMSKQKKDPTYV7JLVAVCNFSM6AAAAABD4V4T6CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZSGI3DSMZXGM . You are receiving this because you were mentioned.Message ID: @.***>
-- Joy Straub Teacher Success Lead | Bootstrap
bootstrapworld.org Looking for more Bootstrap? Check out our blog https://www.bootstrapworld.org/blog/index.shtml, or follow us on facebook https://www.facebook.com/BootstrapWorld, instagram https://www.instagram.com/bootstrapworld/ and twitter https://twitter.com/bootstrapworld. Confidentiality notice: This message is intended only for the use of the individual or entity to which it is addressed, and may contain information that is privileged, confidential and exempt from disclosure under applicable law. If you have received this message by error, please delete it from your records.
@schanzer Checking in re how much muscle it will require to make the colors work. As I understand this request, it's not to make all of the circles have color, just the specific ones that Joy shared because they are a moment when we're introducing something new. Wondering if we should just use images? And, given bot the limited use and the fairly static nature of this lesson (Joy said she makes this same change every year) I feel quite comfortable with the maintainability of using images.
@flannery-denny coloring the circles is trivial. All Circles of Evaluation s-expressions have the class .circleevalsexp
, so we can build up CSS rules for nested .expression
s within .circleevalsexp
. I've pushed a commit that does exactly that.
Coloring the code, on the other hand, isn't even possible with CodeMirror 5.0. There's hope in version 6.0, but moving to v6 is a monumental task and not happening anytime soon.
@joystraub Since you already have these slides built, would you mind sharing a link to it so that I can just screenshot the code you have?
@schanzer I'm seeing these circles building with color in the lesson plan, but the colors aren't making it to slides. Would you prefer to work on getting them to slides or for me to use screenshots?
@ds26gte unless we switch COEs to use the same rendering pipeline as tables, I'm going to recommend that Flannery go ahead with screenshots and add this to the slide tracking issue.
My file is [https://docs.google.com/presentation/d/1KIuz21CV3mmZv9wfgApvtIVrVT1KlBRGbuxby2XGheE/edit?usp=drive_link] These slides are 52 & 53 in this deck.
@flannery-denny colored COEs are now working in the contracts-tables-displays deck!!
I've also pushed a change to the lesson plan that defaults to colored code when in slide mode. It adds complexity, which I'm not sure is worth it -- but up to you to either get rid of it or keep it and use it elsewhere in the lesson.
@schanzer I'm just confirming that I understand correctly that colorcoding of the code to match the COE is only possible in slides? I'm seeing it there, but not in the lesson plan and I find it quite surprising that it would be easier to accomplish in slides than in the lesson plan.
@flannery-denny Correct.
You can see what I did to make it possible. if you're OK with the added complexity, and the color coating only showing up on slides, then you'll find it easy to duplicate elsewhere in the lesson.
But if you don't think it's worth the complexity or inconsistency, feel free to take it out
@schanzer Upon closer inspection I'm noticing that
sort
is red in the first circle it will also be red in other nested circles... which corresponds to the act of drawing a nested circle on the board, and then adding another layer to it.Checking in before I go back to the screenshots for color-coded COE plan that there isn't some switch you would like the opportunity to flip before I use images here.
@flannery-denny ah, interesting. I can mess with the CSS rules and probably duplicate this.
(Also, I think writing specs is an area where we need to be crazy precise about our language - I had to read your comment several times and compare it to the image to understand what you really meant! Joy isn't coloring any functions at all in the circles - she's only coloring the border around the expressions. I was totally flummoxed when you said "sort is red", when it's actually dark gray)
Done!
@schanzer this is close, but I'm still seeing one instance where the color for first-n-rows changes from black to blue.
Are you read for me to work with screenshots?
@flannery-denny I'm confused. Joy's screenshots clearly show first-n-rows
being both black and blue, and I've done my best to copy this behavior.
At this point I'm just playing whack-a-mole with your comments, where you give me one thing that's broken at a time. It would be helpful to have you write down exactly what the coloring rules are, so I can implement them.
Sorry @schanzer adding this to our meeting agenda.
@schanzer I've got the lesson plan doing what I want, but the background colors aren't rendering correctly in the COE on slides. lmk if you'd like me to make a separate issue for Dorai.
@flannery-denny ooh, it looks like there's some subtle difference in the way CSS rules are handled in this situation. I've pushed a fix, and confirmed that it generates the proper slide images
Thanks @schanzer. I'm still seeing [.circle2]
passing through to the slides.
@ds26gte can we just filter out anything that looks like asciidoc annotations? Or maybe at least throw a warning?
Every PD I modify a few of the master slides to improve teacher learning. I think they would improve student learning, as well. Would it be possible to add these ideas directly to the Master Slides? 1) Circles of Evaluation in the DS Contracts Lesson: I add color to assist in moving from circles to coding 2) Use a real image of the Pyret screen instead of a drawing in the Simple Data Types lesson: