Rezolvarea unei provocări de cod
Fig. 1
Hai să rezolvăm o provocare DojoCode! Într-o provocare, vei putea să îți rulezi codul și să îl trimiți.
Când deschizi o provocare, vei găsi secțiunea Challenge Info (Fig. 1), care include titlul și descrierea. Chiar sub titlu, poți găsi bara de informații a provocării (Challenge info bar), care include un rating de satisfacție, numele autorului și punctele XP pe care le primești pentru finalizarea provocării. Descrierea în sine oferă detalii detaliate, inclusiv exemple practice, specificații de intrare/ieșire (input/output), fragmente de cod și, pentru componentele frontend, capturi HTML care te ajută să vizualizezi rezultatul așteptat. (Fig. 3)
Fig. 2
În colțul din dreapta-sus al zonei Challenge info, vei găsi un meniu derulant care îți permite să alegi șablonul (template) în care dorești să rezolvi provocarea. (Fig. 2)
Acest lucru îți oferă flexibilitatea de a lucra cu mediul și limbajul în care te simți cel mai confortabil sau de a experimenta cu altele diferite.
Fig. 3
În zona Editorului (Fig. 1), îți poți scrie soluția. Poți folosi butonul Run pentru a-ți executa codul în mediul provocării sau butonul Test pentru a rula testele inițiale pentru soluția ta. Acest lucru îți permite să îți verifici logica înainte de a trimite, având suport pentru toate limbajele majore.
Zona Preview (Fig. 1) afișează rezultatul vizual (pentru provocările bazate pe browser). De asemenea, poți redimensiona panourile folosind bara de divizare (splitter bar) îmbunătățită pentru a-ți personaliza spațiul de lucru. Jurnalele de consolă (console logs) și rezultatele execuției codului tău vor apărea în zona de afișare a rezultatelor testelor, situată sub butoanele de acțiune.
Zona Preview are, de asemenea, butoanele „Run”, „Test”, „Edit”, „Submit” și „Solutions”. În plus, vei găsi butonul Help. Această funcție de ajutor îți oferă ghidare pas cu pas, explicând fiecare detaliu de pe pagină.
- Butonul Run: Îți execută codul direct în editor.
- Butonul Test: Rulează testele inițiale pentru soluția ta.
- Logs Output: Vizualizează jurnalele de consolă (console logs) în timp real și informațiile de depanare din execuția codului tău în zona de afișare a rezultatelor testelor.
- AI Test Explanations: Dacă testele tale eșuează, asistentul Chat AI îți poate oferi acum explicații specifice pentru eșecuri pentru a te ajuta să depanezi mai rapid.
Fig. 4
Tabul Chat îți oferă acces la asistentul AI integrat al DojoCode. Acesta acceptă două moduri — Understand pentru învățare și indicii, și Implement pentru programare asistată de AI. Pentru a afla mai multe, consultă ghidul Asistență AI.
Butonul Feedback se află lângă butonul Help, unde poți lăsa feedback pe baza experienței tale pe platformă. Îți poți scrie propria recenzie sau poți alege dintre anumite opțiuni de feedback deja propuse, cum ar fi: „I don't understand the task”, „The tests are not working correctly” sau „Autocomplete doesn't work”. (Fig. 5) 
Fig. 5
Butonul Share este o funcție prin care îți poți distribui soluția pe diferite canale de comunicare, cum ar fi Email, Twitter, LinkedIn, HackerNews, Reddit, Facebook, Skype sau Messenger.
În Editor Settings, vei găsi diverse funcționalități pentru codul tău, pe care le poți personaliza după bunul plac. Vezi Fig. 6 Funcționalitățile sunt următoarele:
- Code Editor Theme: Aici poți alege tema editorului de cod. Poți alege dintr-o multitudine de teme, tema ta preferată.
- Code Editor Font Family: Aici poți alege ce font dorești să folosești în editorul de cod
- Code Editor Font Size: Cu această opțiune, alegi dimensiunea pe care dorești să o aibă fontul
- Code Editor Key Binding: Opțiunile de scurtături (keybinding) Emacs și Vim din editorul de cod permit utilizatorilor să adopte comenzile rapide de navigare și editare a textului din Emacs sau Vim, oferind o experiență de editare familiară și eficientă pentru utilizatorii obișnuiți cu aceste editoare.
- Code Editor Indent Width: Alege lățimea indentării pe care o dorești pentru editorul de cod. Limita este 8.
- Code Editor Indentation: Alege cum dorești să fie realizată indentarea în cod. Ai două opțiuni: spaces (spații) sau tabs (taburi)
- Emmet: Acesta este un plugin integrat pentru editarea textelor/testelor, un instrument care te ajută să scrii cod mai rapid.
- IntelliSense: IntelliSense este un asistent de completare a codului care include mai multe funcționalități: List Members, Parameter Info, Quick Info și Complete Word. IntelliSense este acceptat în HTML/CSS, JavaScript și TypeScript.
Fig. 6
INFO
Pe pagina Solutions, vei avea access la toate soluțiile trimise de comunitate.
Ce urmează?
După ce ai rezolvat o provocare, poți:
- 🎯 Află ce se întâmplă după rezolvare
- 👀 Vizualizează și compară soluții
- 🔓 Deblochează soluții pentru ajutor
- 🏆 Verifică-ți punctele și nivelurile
Ești gata să îți creezi propriile provocări?