Solving a Code Challenge #

Fig. 1

Let’s solve a DojoCode Challenge! In a challenge, you will be able to run your code, submit it, or if you need help, find the correct solution for the chosen challenge.

When you open a challenge you will find the Challenge Info (Fig. 1) that includes the title and description. Right below the title, you can find the Challenge info bar that includes a satisfaction rating, the name of the author and the points you receive for completing the challenge. In addition, you can see a snippet of the expected input, output info and HTML snapshots for browser-based challenges. (Fig. 2)

Fig. 2

In the Editor area (Fig. 1) there is the code editor with the default template based on the choice of programming language. Here you can write your solution directly on the browser, compile it and run it in real-time.

Fig. 3

In the Preview area (Fig. 1) you can see the output generated by your code. Press the reload button to refresh the browser preview or open DevTools by clicking the wrench icon (🔧). (Fig.3)

Preview Area also has the “Run”, "Edit", “Submit” and "Solutions" buttons. (Fig. 3) Additionally you’ll find the Help Button. This help function gives you step-by-step guidance, explaining every detail on the page. (Fig. 3)

The Feedback Button is next to the Help Button, where you can leave feedback based on your experience on the platform. You can write your review, or you can choose between certain feedback already proposed such as: "I don't understand the task", "The tests are not working correctly" or "Autocomplete doesn't work". (Fig. 4) Fig. 4

The Share Button is a function through which you can share your solution on different communication channels, such as Email, Twitter, LinkedIn, HackerNews, Reddit, Facebook, Skype or Messenger.

In the Editor Settings, you'll find different features for your code, you can customize it to your liking. See Fig.5 The features are as follows:

• Code Editor Theme: Here you can choose your code editor theme. You can choose from a multitude of themes, your favorite theme.
• Code Editor Font Family: Here you can choose which font you want to find in your code editor
• Code Editor Font Size: With this option, you choose the size you want the font to have
• Code Editor Key Binding: The Emacs and Vim keybinding options in the code editor allow users to adopt the respective text navigation and editing shortcuts from Emacs or Vim, providing a familiar and efficient editing experience for users accustomed to these editors.
• Code Editor Indent Width: Choose what indent width you want the code editor to be. The limit is 8.
• Code Editor Indentation: Choose how you want the indentation to be produced in the code. You have two options: spaces or tabs
• Emmet: This is a built-in plug-in for editing tests, this tool helps you write code faster.
• IntelliSense: IntelliSense is a code-completion aid that includes several features: List Members, Parameter Info, Quick Info, and Complete Word. IntelliSense is supported in HTML/CSS, JavaScript and TypeScript.

Fig. 5