Web app - interactive lesson

[AT-290690]

Hello, I'm a 2D animator & software developer - I can create ✨ interactive animations and stuff ✨

Portfolio

Toaster Interactive Animation (You should be able to lower the lever of the toaster to bake the bread) Wolf Plain Animation Frog Plain Animation Beetle Plain Animation

I would like to get involved in some sort of interactive lesson. Imagine some platform like Brilliant but way simpler and focused only on one topic - your topic.

For example: The user is presented with a problem - broken down into several stages. Each stage gives more understanding of the problem and proof of the solution. The user can draw things with math on the screen using a text editor and other interactive components to solve visual or text-based puzzles. The user is guided via hints and autocompletion to solve the problem - progress to the next stage. Every stage starts with a brief introduction to a task. the solution should be as obvious as possible with no time limit

Either you solve it on your own or you use a couple of hints. Or spoil the solution. It is the user's choice.

I've been working for the past couple of days on an example tool for such a lesson.

⚠️ DISCLAMER: depending on the problem all of this might be thrown away - it is just an example of what I can and what I'm interested in doing right now. ⚠️

It is a code editor with a little helper robot (currently I use the Hyper Light Pink Drifter drone as an asset) The design will change based on the theme of the problem. So this is only a mockup.

Here is an example of how to use it - simply open this editor and paste this piece of code:

expr`
  posx (r, t) = (16 (sin (t) ^ 3)) r
  posy (r, t) = (13 cos(t) - 4 cos(2 t) - 2 cos(3 t) - cos(4 t) + 20) r
`
const { width, height, draw } = Engine
const render = Engine.render(); render.makeGrid();
const drawCircle = (x, y, s = 3, color = "crimson") => {
const circle = render.makeCircle(width(0.5) + x, height(0.9) + y, s)
  circle.fill = color; circle.noStroke(); return circle
}
const posx = expressions.get("posx"), posy = expressions.get("posy"), 
circle = drawCircle(0, 0, 10, "orange")
for (let x = 0; x < 50; x++) drawCircle (posx(6, x), posy(-6, x)) 
render.update() 
draw ((delta) => {
circle.position.x = width(0.5) + posx(6, delta * 0.01)
circle.position.y = height(0.9) + posy(-6, delta * 0.01)
})
render.play()

Then Ctrl/Cmd + S or click the on the drone. You should see a picture of a heart on the screen.

The expression tags allow for embedding actual math expressions

posx (r, t) = sin (t) r 10 posy (r, t) = cos (t) r 10 - 100

That way the user is closer to math than to programming. Then these expressions can be used in the practical program. With some additional abstraction, the code part can be hidden from the user

• writting only the expression in the editor

Help with hints, autocompletion, and error messages are essential. Autocompletion can pick up variables and construct useful snippets. With a bit of work, it can understand it is inside the expression tags and offer math-related suggestions.

I'm not building everything from scratch - For now, I've stumbled upon 3 web libraries that help glue this together:

codemirror for the editor two for drawing shapes on the screen math for math...

Target medium

Web

Contact details

If you think this is how you want to present your topic feel free to contact me. For now, this issue is my contact. Just paste the link to your issue in the comments. I will update my contacts later. email: antony.k.tonev@gmail.com

[cchanavat]

Hi!

About the author

I'm a master student in category theory (CT) and it's been few weeks that I have this idea in mind: I believe CT has huge potential for learning trough gamification and I'd like to make a small game about it. Problem is, I do not know how to make games.

Quick Summary

The heart of CT is arrows, when you're doing CT you basically have to assemble a bunch of arrows together in a meaningful way in order to construct complex and abstract mathematical structures. Each arrow is between two objects, the source and the target. Some arrows have superpower, they can be unique (in some specific way), they can be reversed, they can emerge from nothingness, they can commute. The mathematical construction also have superpower, they can give you more arrows, they can tell you whenever two arrows are the same, they can reverse all the directions of the arrows, ...

A first idea for this game would be:

1. Each level starts with a fixed setups, that is a bunch of arrows and objects drawn on the screen
2. The player must then draw new arrows, and/or place new arrows and/or use superpowers of the arrows / construction in order to achieve a certain goal.

A concrete example

For instance, this could be the first (or so) level. In CT, there is the operation between two object that is called the Cartesian product (a generalization of the well known Cartesian product for sets). If I take two objects U and V, I can make the product UxV. This product comes with two arrows, p1 : UxV --> U and p2 : UxV --> V, respectively the first and the second projection. This product construction comes with a superpower (a universal property), that I will let Wikipedia explains for me. Knowing that, we can have our first level. Here is the setup: Goal: Construct an arrow from the top U to UxU
Setup U

U <--p1-- UxU --p2-> U

Solution: to solve this, we first draw two arrows U --> U (one from the top U, to the bottom left one, the other from the top U to the bottom right one). These arrows are the identity. (it's a superpower, when we have an object X, there is always an arrow id : X --> X with a bunch of cool properties). After that, we can apply the superpower of the product, and it magically draws an arrow from the top U to UxU.

I'm a little bit afraid this sounds complicated and not fun, but I'm pretty sure that with a nice interface and a list of actions to select from, this could be really cool. There is a lot more to say and I have a lot of cool ideas for different levels!

I hope you'll be interested, I really like the style of your art and I think it could realize this idea in a really fun and pretty way!

Contact details

If you go on my github profile, there is my website with my email in the contact section

[AT-290690]

Sounds great. I'm interested in Sets and I would be happy to learn more about it. - are you up for a collaboration? I'll contact you later today.

[cchanavat]

Yes that sounds great! Looking forward to hearing from you.

[aargup934]

I would like to put up my idea at #18, it would contain stuff like Ramsey theory and graph theory.