Rezolvarea unei provocări de cod
Fig. 1
Hai să rezolvăm o provocare DojoCode! Într-o provocare, vei putea să rulezi codul și să îl trimiți.
Când deschizi o provocare, vei găsi Informațiile despre provocare (Fig. 1), care includ titlul și descrierea. Chiar sub titlu, poți găsi Bara de informații a provocării, 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, fragmente de cod și, pentru componentele frontend, capturi HTML pentru a te ajuta să vizualizezi rezultatul așteptat. (Fig. 3)
Fig. 2
În colțul din dreapta sus al zonei Informații despre provocare, vei găsi un meniu derulant care îți permite să alegi șablonul în care dorești să rezolvi provocarea. (Fig. 2)
Acest lucru îți oferă flexibilitatea de a lucra cu mediul și limbajul cu 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 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, cu 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 îmbunătățită pentru a-ți personaliza spațiul de lucru. Console logs și rezultatele execuției codului tău vor apărea în zona de afișare a rezultatelor testelor, situată sub buoanele 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ă îndrumări pas cu pas, explicând fiecare detaliu de pe pagină.
- Butonul Run: Execută codul tău direct în editor.
- Butonul Test: Rulează testele inițiale pentru soluția ta.
- Logs Output: Vizualizează console logs în timp real și informațiile de debug din execuția codului tău în zona de afișare a rezultatelor testelor.
- Explicații de testare AI: Dacă testele tale eșuează, Chat-ul AI îți poate oferi acum explicații specifice pentru eșecuri pentru a te ajuta să depanezi mai rapid.
Fig. 4
Tab-ul Chat îți oferă acces la asistentul AI integrat al DojoCode. Acesta acceptă două moduri — Understand pentru învățare și indicii, și Implement pentru scrierea de cod 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” (Nu înțeleg sarcina), „The tests are not working correctly” (Testele nu funcționează corect) sau „Autocomplete doesn't work” (Autocompletarea nu funcționează). (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 (Setările editorului), 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 tema preferată dintr-o multitudine de teme.
- Code Editor Font Family: Aici poți alege ce font dorești să fie folosit î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 taste rapide (keybinding) Emacs și Vim din editorul de cod permit utilizatorilor să adopte scurtăturile respective 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 în 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 (tab-uri)
- Emmet: Acesta este un plugin integrat pentru editarea 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 integrat pentru HTML/CSS, JavaScript și TypeScript.
Fig. 6
INFO
Pe pagina de soluții, vei avea acces la toate soluțiile trimise de comunitate.
Provocări de scriere a testelor
Unele provocări îți cer să scrii testele în locul soluției. Vezi Rezolvarea unei provocări de scriere a testelor.
Ce urmează?
După rezolvarea unei provocări, poți să:
- 🎯 Află ce se întâmplă după rezolvare
- 👀 Vizualizează și compară soluțiile
- 🔓 Deblochează soluții pentru ajutor
- 🏆 Verifică-ți punctele și nivelurile
Ești gata să îți creezi propriile provocări?