I am new to the forum, so hello all! I hope my post is not to digressing, sorry for the long text.
tl;dr: How could I record code written in CodeMirror in way, that would make it possible to play-back that code later on another person’s view of the webpage? Making it look like I could watch someone over the shoulder while he is writing his code. TheCodePlayer is a fine example for my intention. (after the next but one horizontal rule is more problem related text)
Background
I am very frustrated with the way software development and engineering was taught at my university. From the get-go we wrote code without ever reading others code or even digging into repositories of open source software, no matter if big or small. We never read code, that was not our own or the professor’s!!
In my later semesters, laden with frustration, I talked to the professors. Most of them agreed with me, that reading code should be an essential part of a computer science curriculum, but brought forward mostly two arguments:
- It would make cheating easier to students. I don’t go into that now - not an argument to me.
- To much effort to bring up a platform, allowing organized code reviews…
One of my professor even tried to do (anonymized) peer code reviews, but scratched it when time ran out and he realized it was too much work to enable it.
Frustrated with what I learned (or not learned) in university I quit. But never did I lose my interest for coding (or computer science in general).
With the impression I had, leaving university, I searched for like-minded people and found CodeWars and TheCodePlayer, later more to the latter.
CodeWars is brilliant platform, where I learned way more than in university - at least when it comes to software development, patterns and idioms. It would be brilliant for some classes in university, BUT it is a closed platform. So my professor would not have been able to create his separate/private course room, uploading his own exercises with his own automated tests.
Inspired by CodeWars and in the spirit of the MOOC (which had it’s golden time back then) it thought I could
- Develop an open/libre platform similar to CodeWars
- Not controlled by me, P2P hosted on a mirage of servers (Raspberry Pi’s are cheap).
- Having a replay function, which enables me to see the true development of software, compared to VCS, which hide the dead ends developers face from time to time. VCS is not organic, the snapshots I see resemble working code (at least for most projects
). It won’t show me the mistakes developers make.
). It won’t show me the mistakes developers make.That is not a quite small endeavor, so I should start small. The main feature of that platform should be code replay, as in my view this could make the platform organic and friendly, inviting people to join and stay. In the end this should augment the universities and even make it possible to replace them, for those people who don’t have access or interest.
##Getting to the essence
My main activity is based in low level stuff and Java/Python, thus I am not very versed in JavaScript. Learning by doing I just got started implementing a first sketch of a text recorder and immediately got stuck. 
http://jsbin.com/yaxunoroha/edit?js,output
I thought it would be most logical, to use a <textarea> element to receive and record the source code, neglecting code format and highlighting at first.
The obvious problem here is, that this method does not catch caret relocation with the mouse, nor copy-and-past. Being stuck, I took a look at other online codeeditor’s (CodeMirror & ace). Understanding how they work should give me some hints on how I could tackle that problem. It will keep me occupied for a long while get a firm grasp of the architecture and behavior of CodeMirror. So I hope that someone could show me the light and explain to me how I should approach my problem.
Sorry again for that way too long and digressing text.