Widgets

Have a look at the widgets you can use to make your Answers interactive. All widgets have two modes:

  1. Edit mode: Visible to the author, used to add code files and set up the execution environment.

  2. Preview mode: Visible to the reader, used to execute the code.

The widgets support some technologies natively. If you need to extend or add more execution environments behind the widgets, you can do that with the help of DockerDocker is a container management service that allows developers to build applications, ship them into containers and run them anywhere. Docker allows you to create your own custom environment to accommodate any language/framework that is not supported by our platform. For each widget, the docker setup guide will be provided. In the next lesson, we will delve further into Docker. For now, let's get acquainted with the widgets.

🐳 You can explore the Answers' docker repository to find the docker setups that you may require.

 📞 In case of queries, you can contact us via the Answers community slack.

Code widget

A major use of the code widget is to add executable code snippets for different languages.

The languages supported by the Educative code widget are:

  • Assembly, C, C#, C++, Clojure, CSS, D, Dart, Diff, Dockerfile, Elixir, Erlang, Go, Haskell, HTML, Java, JavaScript, Kotlin, Markdown, Node.js, Perl, PHP, PostgreSQL, Python, R, Reason, Ruby, Rust, Sass, Scala, Scheme, Shell, Solidity, Sql, Swift, TypeScript, XML, YAML.

The code widget allows you to:

  • Choose your programming language of choice

  • Execute/run the code

  • Highlight specific lines or code blocks (highlight lines option)

  • Add input files (left panel)

  • Take input from the user

Code widget
Code widget

  • The code widget allows a maximum execution time of 55 seconds.

  • The time limit option in the widget can be used to increase the default execution time of the widget from 30 seconds upto 55 seconds.

  • If your code takes longer to execute please use the terminal widget or the SPA widget accordingly.

📚Detailed guide on how to use the Code widget

🐳 Docker setup guide for the Code widget

Single Page App

The SPA widget allows you to create simple and complex applications wherever you need them in the lesson. It is generally used in conjunction with docker to create specific execution environments based on your requirements. It can run front-end apps (e.g., React apps, Jupyter notebook), back-end apps (e.g., Node), command line utilities (e.g., aws-cli), and much more. You can have a look at our docker setup repository for any docker setup that you may require.

SPA widget
SPA widget

Following are some options to add code to the SPA widget in edit mode.

  1. Add local code files to the SPA widget

  2. Import code from Github

  3. Create files and folders in the widget

📚Detailed guide on how to use the SPA widget

🐳 Docker setup guide for the SPA widget

Terminal widget

The Terminal widget, also known as a Live Terminal, is a Ubuntu 16.04-based terminal. You can add it to your Answer as an integrated terminal.

Usecase example: It can be used with a docker setup to run mongoDB and Postgres.

Start Script

The Start Script field at the top allows you to specify the commands that should run every time the terminal configures. It isn’t visible to the reader; it is only visible to the author.

Terminal widget
Terminal widget

📚Detailed guide on how to use the Terminal widget

🐳 Docker setup guide for the Terminal widget

GUI Widget

The GUI App widget allows you to create window-based GUI applications. It will come in handy when you want learners to write code for a GUI in your Answer.

The widget natively supports two GUI-building frameworks:

  • Java Swing

  • Tkinter (Python)

  1. Choose the default loader for a Java Swing or Python Tkinter desktop application, respectively.

  2. Upload files and folders to the widget.

  3. Set up a Docker environment to create GUI apps in any framework of your choice! Details on that process can be found in this lesson.

  4. Import code files from Github.

  5. Create files and folders.

For more information on how to use the GUI widget check out our guide.

Visuals

You can use the drawing widget to create diagrams as well as to upload and resize images.

Drawing tool

The drawing widget has functionality that allows you to create:

  • UML diagrams

  • Venn diagrams

  • Flowcharts

  • Infographics

However, its use is not restricted to just these four types. It gives you the freedom to draw as you please!

The widget also supports the import of images from the web.

Drawing widget
Drawing widget

On the left side, you have the options for adding various assets and diagrams. For more information on the drawing widget check out our guide.