Initial State of Serlo Editor Plugins

If you are integrating the Serlo Editor as npm package in React or web component in your app, you may want to display a certain initial state when opening the editor. We recommend using the plugins and Plugin API that is documented here. It also contains icons (string encoded SVGs) for each plugin.

Alternatively, you can simply copy & paste the initial states for the plugins below.

If you have any questions, please reach out to us in the contact form at the bottom of the page.

Multimedia

{"plugin":"rows","state":[{"plugin":"articleIntroduction","state":{"explanation":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"multimedia":{"plugin":"image","state":{"src":"","caption":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}},"illustrating":true,"width":50}}]}

Text

{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]}

Text with plugin selection

{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":"/"}]}]}]}

Picture

{"plugin":"rows","state":[{"plugin":"image","state":{"src":"","caption":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}}]}

Spoiler

{"plugin":"rows","state":[{"plugin":"spoiler","state":{"richTitle":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]}}}]}

Box

{"plugin":"rows","state":[{"plugin":"box","state":{"type":"example","title":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"anchorId":"","content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]}}}]}

Tabel

{"plugin":"rows","state":[{"plugin":"serloTable","state":{"rows":[{"columns":[{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]},{"columns":[{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]},{"columns":[{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]},{"columns":[{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]}],"tableType":"OnlyColumnHeader"}}]}

Serlo.org injection plugin (disabled in integrations for now)

{"plugin":"rows","state":[{"plugin":"injection","state":""}]}

Equations

{"plugin":"rows","state":[{"plugin":"equations","state":{"steps":[{"left":"","sign":"equals","right":"","transform":"","explanation":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"left":"","sign":"equals","right":"","transform":"","explanation":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}],"firstExplanation":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"transformationTarget":"equation"}}]}

GeoGebra Applet(disabled in integrations for now)

{"plugin":"rows","state":[{"plugin":"geogebra","state":""}]}

Code

{"plugin":"rows","state":[{"plugin":"highlight","state":{"code":"","language":"text","showLineNumbers":false}}]}

Video

{"plugin":"rows","state":[{"plugin":"video","state":{"src":"","alt":""}}]}

Single Choice or Multiple Choice exercise

{"plugin":"rows","state":[{"plugin":"exercise","state":{"content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]},"interactive":{"plugin":"scMcExercise","state":{"isSingleChoice":false,"answers":[{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"isCorrect":false,"feedback":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}},{"content":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"isCorrect":false,"feedback":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]}}}}]}

Input field exercise

{"plugin":"rows","state":[{"plugin":"exercise","state":{"content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]},"interactive":{"plugin":"inputExercise","state":{"type":"input-number-exact-match-challenge","unit":"","answers":[{"value":"","isCorrect":true,"feedback":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}}]}}}}]}

H5P exercise (disabled in integrations for now)

{"plugin":"rows","state":[{"plugin":"exercise","state":{"content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]},"interactive":{"plugin":"h5p","state":""}}}]}

Fill in the gap exercise

{"plugin":"rows","state":[{"plugin":"exercise","state":{"content":{"plugin":"rows","state":[{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]}]},"interactive":{"plugin":"blanksExercise","state":{"text":{"plugin":"text","state":[{"type":"p","children":[{"text":""}]}]},"mode":"typing"}}}}]}