Class diagrams have to be created in many computer science courses, therefore we should also have this task format. I think, that we could use React Flow for handling the interactive creating of classes and connections. For adding fields and methods and updating the class name, we could go different ways. Two which come to my mind are:

Update the nodes in place like on the front page of the documentation of React Flow.

Update the nodes by using a sidebar, like we do for the Flow Editor.

My preference is the sidebar approach. Since this enables us to have rich inputs, but not clutter the class diagram.

I am not sure how to evaluate a given class diagram or how to show a statistic, which are core features of Bitflow. If you have any suggestions, feel free to write a comment.

In some scenarios in schools, a grid is used to ease the problem-solving process. Instead of a single pixel, you only have to worry about a cell, which is the same size as every other object in this world. This is famously used in most introductory Greenfoot books and tutorials. For example, in the official Greenfoot Book. Therefore, I think, that it would be a great idea to implement a "Grid Solver" task.

The task creator should be able to create a grid and fill it with a set of objects. The interface could look similar to this one: https://www.reddit.com/r/reactjs/comments/k9cdbp/codedemo_links_included_built_a_maze_builder_app/.

Based on the grid based scenarios I know, I would propose the following objects:

• Player (an object, which is controlled by the written algorithm)
• Pickup 1 (an object, which can be picked up by the player)
• Pickup 2 (an object, which can be picked up by the player)
• Wall (an object, which a player can not pass)
• Start (an object, where the player starts)
• Finish (an object, where the player finishes)

To mark the solution as correct, there should be a set of objectives, which can be set by the task creator.

• Number of Pickups: The player needs to collect a certain amount of pickups or all.
• Finish: The player reaches the finish.
• Steps: A maximum number of steps which can be used.

When a user submits a solution and the show feedback is enabled, the player should move through the grid. To make this language independent, we need to come up with a protocol, which can be parsed in JavaScript and then executed. I think the best way would be to use actions, which could be dispatched on the frontend. For example, this set of actions:

• MOVE_LEFT(steps)
• MOVE_UP(steps)
• MOVE_RIGHT(steps)
• MOVE_DOWN(steps)
• PICK_UP()
  The actions are basically the public methods, which can be called on a player object.

Optional: The task creator should be able to choose from different texture packs. For example, Crab-Beach, Mars-Rover, Hamster, …

I think it would be great if not only task specific actions would be emitted, but also cursor (clicking and moving) and scrolling ones. This could give even more insights how a task is received and how it could be improved. Of course, it is no eye-tracking, but this kind of analytics is used in enterprise applications like hotjar. In particular, a heat-map feature could be a great opportunity for educators and researchers to find problems about their task.

So I think for this issue to resolve, there needs to be two things done:

• add generic cursor and scroll tracking (maybe also window resizing)
• add a heatmap which displays the tracked cursor actions as an overlay above a task

An error will be thrown if the sounds are not accessible. There should be a catch and just no sound should be played.

Vocab works great until it does not.

I propose that we should move away from vocab to a custom solution. We already have the language property of a flow. We could make it available via a context. Furthermore, we then need a script which can translate, the already existing JSON files, to typescript.

Maybe we can create a new package called "@bitflow/i18n-cli" which compiles to a bin-file with ncc and does the proposed translation.

There are at least two tasks which we could implement for Turning Machines (automatic machine).

1. We could show the definition of a Turning Machine and a user must fill the band.
2. We could show a little task and a user needs to define a Turing Machine.

In both cases, we need a GUI editor for Turning Machine definitions and an interpreter for Turning Machine definitions, so that a solution can automatically be checked.

I think a good visualization of an automatic-machine would be the one Turing used on page 234 in his paper 1. We should also use his terminology:

• tape: The tape is one-dimensional and runs through the machine.
• square: The tape is divided into squares. The machine can only operate on one square at a time. Each square can contain a symbol or be empty.
• scanned symbol: This is the symbol, which is on the square, which is currently in the machine (aka. at the read/write head of the machine)
• m-configuration: A m-configuration and the scanned symbol determines in which m-configuration the machine goes into next. This can also reference as the state of the machine.
• m-function: A m-function is a generic m-configuration, which takes parameters to be reusable.
• the configuration: The configuration of the machine is determined by the combination of the scanned symbol and its current m-configuration.
• a-machine: An automatic machine is a machine where each stage of motion is completely determined by the configuration.
• Circular machine: If a machine writes down a finite number of symbols, it is called circular.
• Circle-free machine: If a machine writes down an infinite number of symbols, it is called circle-free.
• Computable: A sequence is computable if it can be computed by a circle-free machine.

Flowchart (in German Programablaufplan PAP) are very common in schools. I think it would be great to have this task format in Bitflow. One problem which we have with all modelling task format is, how can we evaluate the answer of a student. This is the same for this task format. Maybe we need to close it down a bit. For example, by using select fields for the names of the nodes instead of letting the students freely choose a name.

Additional links:

• https://en.wikipedia.org/wiki/Flowchart
• http://sape.inf.usi.ch/informa/problem-types/graph

Highlighting a given source code is a task format we have evaluated in the past. There is already an implementation for the old OpenPatch system. https://gitlab.com/openpatch/web-frontend/-/tree/master/formats/highlight. It uses draft.js and also supports keyboard interaction for highlighting.

The easiest way would be to copy most of the stuff and use draftjs as well. Unfortunately, draftjs was not updated since August 2020 and the issue count is rising. Thus, I do not know if it is future-proof. Maybe someone knows a better alternative system.

Additional links:

• Old OpenPatch Version: https://openpatch.gitlab.io/web-frontend/?path=/story/format-highlight-renderer--with-dispatch
• Research Paper about automatically evaluating this task format: https://dl.acm.org/doi/10.1145/3279720.3279729
• Research Paper about using this task format: https://dl.acm.org/doi/10.1145/3304221.3319745

Code tracing is an important skill to have. Some argue that it is necessary to learn code tracing, before writing code. The Raspberry Pi Foundation has published an interesting quick read on how students could be guided to trace a code snippet. Maybe we can develop a task, which requires a user to execute the three steps display in this paper.

1. Highlight all expressions
2. Use arrow to show the order of execution
3. Follow the program and fill in the variables table and the output box

The most important aspect of this task would be to generate a good statistic, which should help the task creator to identify possible misconceptions.

I have seen on your project page (https://bitflow.openpatch.org/) that you presumably realise your communication via the VoIP service Discord operated by Discord Inc.

In addition to the fact that, according to the Discord terms of use (https://discord.com/terms), Discord is a US company without a registered office in the EU, it should also be considered that there is a data outflow to third countries outside the EU (e.g. the USA). Furthermore, a look at Discord's privacy policy does not leave a good impression.

The messenger matrix of IT security blogger Mike Kuketz gives a good overview of why Discord is very problematic from a data protection point of view and should better not be used: https://www.messenger-matrix.de/messenger-matrix-en.html.

I would like to suggest two points with regard to the General Data Protection Regulation in force in the EU:

• Please check to what extent communication can be moved to more data protection-friendly and preferably also decentrally organised communication platforms, such as Matrix or XMPP.

• Take a look at an elaboration of the scientific service of the German Bundestag on the DSGVO and the use of US-American cloud services: https://www.bundestag.de/resource/blob/852984/fd554bd62a8e949d8c2fd986cbd99b69/WD-3-102-21-pdf-data.pdf.

With this step, you would upgrade the project IMO enormously.

Maybe we can integrate this https://gitlab.com/ddi-tu-dresden/cs-school-tools/struktog/

You're using zod-to-json-schema from inside your packages folder clearly ripped from my source code, which is fine, were it not for the fact that you've deleted the license file. Doing so constitutes unlicensed use. Strange, considering the latest version supports Zod 3.x just fine so you might as well just use that.

This paper suggests program comprehension tasks in different levels and scopes.

Some tasks are already proposed, some might not be possible to integrate with an automatic evaluation and can only be used in manual mode.

Here is a list of the tasks explained in the paper and their status:

• MT: Not planed, but possible
• RT: Not planed, but possible
• BT: Not planed, but possible
• AT: #82
• MP: Not planed, but possible
• RP: #85
• BP: #81
• AP: Already implemented
• MF: Not planed and not possible to evaluate automatically
• RF: Not planed and not possible to evaluate automatically
• BF: Not planed and not possible to evaluate automatically
• AF: Not planed and not possible to evaluate automatically

For MT, RT and BT one task could be created. All require to draw a rectangle around the code. I am currently not sure what a good user interface to be like. Maybe one could click the beginning and the end of the rectangle at line level. Then a rectangle would be drawn around the content - ignoring indentation.

Paper: https://dl.acm.org/doi/10.1145/3344429.3372501

A very comment task format in computer science education is a Parsons Puzzle. A great implementation of this task format already exists for plain JavaScript https://github.com/js-parsons/js-parsons. Maybe this can be a starting point for an implementation for the Biflow library. Maybe we can use React Beautiful DnD for adding keyboard interactions. One caveat of React Beautiful DnD is that it is seams not trivial to add multi-dimensional Parsons Puzzles - meaning that you can also indent the puzzle pieces.

Additional Links:

• https://js-parsons.github.io/

This is a task format used by the Informa Clicker. I think that it is a great one to assess the understanding of students. I think that we could use React Flow for the implementation of this task format.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency husky to v8.0.3
• chore(deps): update dependency node-plop to v0.31.1
• chore(deps): update dependency plop to v3.1.2
• chore(deps): update dependency typescript-styled-plugin to v0.18.3
• fix(deps): update dependency @hookform/resolvers to v2.9.11
• fix(deps): update dependency csstype to v3.1.2
• fix(deps): update dependency immer to v9.0.21
• fix(deps): update nextjs monorepo to v12.3.4 (@next/mdx, next)
• chore(deps): update dependency @babel/core to v7.22.5
• chore(deps): update dependency @types/node to v18.16.18
• chore(deps): update dependency @vocab/cli to v1.3.7
• chore(deps): update dependency @vocab/core to v1.4.0
• chore(deps): update dependency chalk to v5.2.0
• chore(deps): update dependency esbuild to v0.18.2
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency typescript to v4.9.5
• chore(deps): update emotion monorepo (@emotion/babel-preset-css-prop, @emotion/cache, @emotion/react, @emotion/styled)
• chore(deps): update react monorepo (@types/react, @types/react-dom)
• fix(deps): update dependency date-fns to v2.30.0
• fix(deps): update dependency lz-string to v1.5.0
• fix(deps): update dependency next-seo to v5.15.0
• fix(deps): update dependency react-hook-form to v7.44.3
• fix(deps): update dependency zod to v3.21.4
• fix(deps): update dependency zod-to-json-schema to v3.21.1
• chore(deps): update dependency prettier-plugin-sort-json to v1
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency typescript to v5
• chore(deps): update pnpm to v8
• fix(deps): update dependency @hookform/resolvers to v3
• fix(deps): update dependency immer to v10
• fix(deps): update dependency next-seo to v6
• fix(deps): update dependency remark-gfm to v3
• fix(deps): update nextjs monorepo to v13 (major) (@next/mdx, next)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @changesets/changelog-github to v0.4.8
• chore(deps): update dependency @vocab/react to v1.1.7
• chore(deps): update dependency @changesets/cli to v2.26.1
• chore(deps): update pnpm to v6.35.1
• chore(deps): update actions/checkout action to v3
• chore(deps): update actions/setup-node action to v3
• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest, jest-cli, ts-jest)
• fix(deps): update dependency react-flow-renderer to v10
• fix(deps): update dependency react-markdown to v8
• fix(deps): update mdx monorepo to v2 (major) (@mdx-js/loader, @mdx-js/react)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

There exists many notions for ER diagrams. I think this is the easiest to implement https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model. We could also try to support multiple notions in the same task bit.

We can use sql.js to evaluate SQL in browser and on the server. This should help with providing both client and server evaluation of a task.

The task needs a few settings:

• instruction: string
• defaultQuery: string

For evaluation, it should check whether the resulting datasets are equal. We can use EXCEPT to check that.

• db: URL to a sqlite3 database
• query: Solution query to compare against

For feedback, there should be a few checks:

• Report mismatched row count: If EXCEPT returns rows
• Report mismatched column count: If EXCEPT errors with "SELECTs to the left and right of EXCEPT do not have the same number of result columns"
• Report mismatched/unordered columns: If EXCEPT returns all rows
• Show query result as table

For the UI, we only need a code input with highlighting for the SQL query.