Code Tabs Widget

Code comparison is a very important use case when learning how to program efficiently. The comparison can be withdrawn b/w different approaches or different languages. The 'Code Tabs widget' allows adding tabs for adding code snippets in tabs that are different but somehow related to each other.

We'll cover the following

This is what it looks like:

Press + to interact
Edit mode
Edit mode

Its functionality is entirely the same as that of the Code widget. In other words, each tab is the Code widget, and each tab can have its separate execution/exercises.

What do I need to know?

  • You can add a new tab with the '+' button.

  • You can drag-drop the tabs in any order.

  • You can rename the tab with the pencil icon next to its name.

Note that each tab needs a separate caption.

Example

#include <iostream>
using namespace std;
int main() {
  // your code goes here
  cout << "Hello World";
  return 0;
}
Hello World

In the above example, there are three "Hello World" programs in three different languages: C++, Java, and Python.

Coding playground

The Code Tabs widget can also be used as a coding playground where learners can write their code in any language. This would help the learner to try writing codes on the fly. To enable this mode, mark the additional checkbox: "Code Playground".

Press + to interact
Enable coding playground
Enable coding playground

Below is a sample of a coding playground where learners can choose a programming language out of 50+ available languages.

#include <iostream>
using namespace std;
int main() {
  // your code goes here
  cout << "Hello World";
  return 0;
}
Coding playground