Вежбанка за школарце

Пре неколико година, кад је мој син Михаило ишао у први разред основне школе и учио азбуку, био сам „приморан“ да направим једноставну веб апликацију која ће му помоћи да упамти слова азбуке и помогне му у препознавању слогова и учењу читања.

Користио је неколико дана али му није било претерано занимљиво да се једно те исто врти по белом екрану, па је та апликација остала у запећку.

Мики вежба математику
Мики вежба математику

Пошто је мој син Михаило летњи распуст провео у разним слободним активностима које су подразумевале и компјутерске игре, али без икаквих школских активности, пред крај распуста сам дошао на идеју да направим нешто слично азбуци, само за математику, како би „тренирао“ сабирање, одузимање, множење и дељење са бројевима прве десетице (да се мало подсети онога што је учио претходних година). А онда ми је на памет пао и енглески језик, па сам направио и апликацију за енглески.

Фузија

Пошто сам све три апликације појединачно учинио доступним на вебу, пало ми је на памет да их ујединим у оквиру једног веб места, са пригодним изгледом занимљивим деци, и то пустим у погон са почетком нове школске године.

Тако је настала Вежбанка! (овај назив и домен пројекта победио је у Твитер анкети)

Вежбанка

Користио сам слободне програме Inkscape и GIMP како бих направио елементе сучеља, и то облачиће у стилу неких које сам нашао на нету, небо, траву са цветићима, таблу и дугмад. За испис назива пројекта „вежбанка“ употребио сам ћирилични писани фонт Тесла (реконструисани рукпис Николе Тесле).

Долазна страница vezbanka.com
Долазна страница vezbanka.com

Из статистике сам видео да Записе највећи број посетилаца чита на екранима резолуције 1024×768, те сам сучеље Вежбанке дизајнирао управо за ту резолуцију екрана, с тим да је пожељно користити приказ преко целог екрана како би деца имала што бољи ужитак и уживала у пријатној слици. Уколико при доласку на долазну страницу машина установи да је висина унутрашњег прозора веб прегледача нижа од 620 тачака, препоручиће посетиоцу да притисне тастер F11, што је еквивалент наредби за постављање приказа преко целог екрана.

За све функције апликација користио сам JavaScript, који у сарадњи са нешто PHP-а за организацију апликација производи валидан XHTML 1.1 и CSS 3 кôд.

Тестирао сам функционалност у програмима Mozilla Firefox 3.0 и 3.5, Opera 10, Google Chrome 4, Apple Safari 4 и Internet Explorer 8, и проба је (невероватно :) ) успешно прошла!

Шта све Вежбанка садржи?

Вежбанка је скуп веб апликација које олакшавају учење и меморисање слова азбуке, фонетских парова сугласник-самогласник и читање кратких реченица (Азбука), решавање једначина са бројевима прве десетице (Математика), те меморисање исправно написаних речи енглеског језика и препознавање њиховог значења (Енглески).

Симболично, свака од поменуте три апликације (области) има таблу са другачијом текстуром – мале и велике линије за азбуку, квадратићи за математику и велике линије за енглески.

Азбука

У апликацији Азбука постоји осам вежбица, и то:

  • Азбука (по реду): слова азбуке од А до Ш, велико и мало слово заједно.
  • Азбука (без реда): насумично изабрана мала или велика слова азбуке.
  • Азбука (пар без реда): насумично изабрано мало и велико слово азбуке.
  • Самогласник: насумичо изабрани самогласник, мало или велико слово.
  • Слог (по реду): двословни слогови малим словима, сугласник и самогласник (а, е, и, о, у), у комбинацијама без понављања (ба, ва, га… чу, џу, шу).
  • Слог (без реда): насумично изабрани двословни слог, сугласник и самогласник, мешано мала и велика слова.
  • Реченица (по реду): изабране реченице, једна по једна, из буквара за први разред основне школе.
  • Реченица (без реда): насумично изабрана реченица из буквара за први разре основне школе.

Осим основне статистике о броју пређених задатака и позицији тренутно приказаног задатка у низу, за азбуку тренутно не постоји историја решених задатака.

Азбука се користи једноставним „кликтањем“ на дугме са жељеним задатком.

Азбука - долазна страница
Азбука - долазна страница

Математика

Математика нуди могућност уноса резултата бројевима, и то за операције сабирања, одузимања, множења и дељења. Уколико дете унесе нетачан резултат, о томе ће бити обавештено. Такође се обавештава и када унесе тачан резултат. На дну табле исписује се актуелна статистика са бројем тачних, бројем нетачних и укупним бројем решених задатака.

Дугме „Историја“ са сличицом листе омогућава родитељима увид у списак решених задатака са унетим резултатима, као и временском ознаком када је задатак решен. На овај начин родитељи лако могу видети где дете најчешће прави грешке.

Математика - долазна страница
Математика - долазна страница

Енглески

Енглески тренутно нуди само могућност уноса значења енглеске речи на спрском језику, при чему је могуће унети и синониме (нпр. перница или прибор за pencil-case). За бројеве је поред броја словима могуће укуцати само број (цифрама). Ако дете не зна шта нека реч значи, може укуцати упитник уместо речи и добиће реч на српском. На дну табле се исписује актуелна статистика са бројем тачних, погрешних и укупним бројем датих одговора. Помоћ за непознате речи се не рачуна у одговор.

И за енглески постоји историја пређених појмова, с тим да се поред тачних и погрешних одговора бележи и помоћ за непознату реч. наравно, временска ознака је присутна и за ову историју.

Енглески - долазна страница
Енглески - долазна страница

Домаћи задатак

Још увек није све готове, па отуда маркица „бета“ са леве стране Вежбанке. Остаје да направим историју за азбуку, могућност избора уноса значења на српском или уноса енглеских речи за апликацију Енглески, сличице предмета за слова азбуке и евентуално сличице које описују енглеску реч у апликацији Енглески.

Имао сам идеју да поздрав при дласку на Вежбанку и упутство за коришћење изговара глас (Микијеви, мој, или неки други), али сам за почетак то избацио из скорих унапређења док не пронађем елегантно решење које ће радити свуда.

Захвале

Пре свега се захваљујем сину Михаилу што ме је индиректно (несвесно) „натерао“ да напишем Азбуку, Математику и Енглески. Такође се захваљујем Бобић Синиши на чијем серверу су хостоване апликације. И на крају остаје да се захвалим људима који су били „бета тестери“ и дали неке предлоге, а то су: Ивана, Вуле, Крсто, Ирис, Петар, Валтер, Ацо и свим твитерашима који су гласали у анкети за назив/домен пројекта.

Ако сам нешто заборавио да напоменем, не замерите. Пошто је Вежбанка некомерцијални пројекат, нема никаквих реклама. Банере за Вежбанку ћу направити у наредних неколико дана и биће доступни на инфо страници вежбанке, па ћете моћи и ви да „ширите глас о Вежбанци“ ;)

Визуелне мане

Више људи је приметило да се Вежбанка баш визуелно и не уклапа на њиховим уобичајеним екранима. Истина, ни на мом лаптопу у резолуцији 1280×800, и то у неком прозору који је нижи од висине коју сам ја „замислио“ изгледа овако:

Табла преклопљена травом
Табла преклопљена травом

Заиста изгледа „недовршено“, али тако је због идеје да се Вежбанка гледа у режиму приказа преко целог екрана. Као што сам горе и навео, у Вежбанка најбоље изгледа на резолуцији 1024×768 када је прозор веб прегледника развучен преко целог екрана (енг. Full Screen). Свака друга комбинација „у прозору“ ствара утисак недорађености.

Знам да је ретко ко навикао да сурфује у „фулскрину“, ал’ ово је за децу, није за нас маторе ;)

Објављено од стране

Александар

Самостални веб програмер. Дугогодишње искуство у развоју веб софтвера коришћењем WordPress, PHP, jQuery, HTML5, CSS3 (SASS/LESS).

47 thoughts on “Вежбанка за школарце”

  1. Pre negoli sam pročitao ovaj post, posetio sam stranicu da vidim da li si nešto usvojio od mojih predloga tako velikodušno i bez IP prava rasutih po Fejsu :), ali ti samo promenio interfejs ;) Međutim, moram reći da odlično izgleda, prosto mi dođe da vežbam matematiku… Aplikacija je genijalna u svojoj jednostavnosti i samoj činjenici da postoji, odn. da se neko ne samo setio već i potrudio da je napravi. Bravo!
    Naravno, ja ne bih bio ja kada ne bih nešto njaoke, pa ću ti skrenuti da pažnju da kao autor vežbanke za srpski jezik, čijeg si pravilnog korišćenja u ćiriličnoj pismenoj izvedbi veliki proponent, ne bi trebalo da koristiš predlog ispred infinitiva za izražavanje namere (za uraditi, grave mistake), jer iza predloga može ići samo glagolska imenica… Od mene tol’ko, keep up the good work!

  2. Djura je bio najvredniji i prvi je “ukrao” ceo post sa slikama, tekstom i linkovima….
    Aleksandre, zahvaljujemo se sto ste nam dozvolili da preuzmemo u kompletu vas post, jer Vezbanka zaista zavredjuje posebnu paznju…
    Hvala vam !!! Super ste…

  3. Ух, па мени баш и не ради? Мада ја користим Ватреног лисца 2.0.0.18 (ала ће да падне инсталација новог слаквера).

  4. @Sinisa Bobic, @Vule, @Eniac, @Mladen Drobnjakoivic, @Suske, @Deda, @Škrabalica: Хвала! А сад, склоните се од компа и пустите децу нек вежбају ;)

    @Linga: Хвала! Сарадња је добро дошла, кад год су клинци у питању.

    @momsab: Хвала! Улетео си у тернутку кад сам штеловао mod_rewrite :) Има сад „окречене“ и 403, и 404, а и 500 ;)

    @Petar: Твоји предлози са Фејсбука су у „Домаћем задатку“, чини ми се ;) А за сотатак око „За урадити“, вала си ме упутио :D Добро овако како је сада? ;)

    @Djura Jaksic: Поздрав за Ђурине ђаке прваке :)

    @Љубомир Куриј: Који део не ради? (пошто капирам да оно „баш и не ради“ значи да нешто ради а нешто јок? :D

  5. Uf, izgleda da jesu, ali kod “Za uraditi” sam dobio tikove i prestao dalje da čitam, a počeo da pišem komentar :D Anyway, to ne umanjuje kvalitet tvoje zamisli, a još manje njene izvedbe… Kada nađeš eleganto rešenje koje će raditi svuda za reprodukciju zvuka, razmisli još jednom o mom predlogu da se prilikom prikaza reči reprodukuje izgovor, po mom skromnom mišljenju nešto što je većini učenika engleskog jezika u Srbiji, paradoksalno, najslabija tačka. Zajebo ne Vuk, šta mož da radiš…

  6. Повратни пинг: OnLine Vežbanka | Walter.rs
  7. @Александар:

    Па нисам сигуран какве везе има “Освајач” са овим, пошто користим као што сам већ рекао “Ватреног лисца” (ако има, дај молим те објасни, да знам за касније), додуше верзија је матора 2.0.0.18.

  8. @Petar и @Љубомир Куриј: А ја се ухватио Освајача к’о пијан плота :) Дакле, у Освајачу елементи нису „кликабилни“ а у Фајерфоксу 2 нема ничега осим позадине и травице! Заиста невероватно и уопште ми не пада на памет у чему је фора (осим z-index-а и апсолутног позиционирања, али би то требало да ради и у старијим прегледачима…).

    @Gaga и @Charolija: Хвала девојке :) Сад пустите мало клинце за комп, а ви спремите ручак за сутра ;)

  9. Uvod za predlog i sugestije:
    Pogledam raspored mog šestaka, nigde informatike. Kaže on: ma to će možda biti u drugom polugodištu, ali to i nije važno, ionako na informatici igramo igrice :O

    A pro-po, pored da sam šokirana zapostavljanjem predmeta informatika u OŠ, a tutnjimo svi u IT, moj predlog je da se u tvojim aplikacijama, u dogledno vreme, naravno, nađe i informatika.

  10. Александре, ви ме све више и више одушевљавате. Свака част. Ово ће у мојој школи веома брзо да се прочује. Мислим да ће учитељице као и ђаци бити презадовољни.

  11. Одличан сајт, мада имам једну замерку. Мени је доста времена требало да прочитам наслов “Вежбанка”. Пошто је мени нечитак, како је тек деци! И још нешто, мој братанац ме је питао шта значи “бета”, која му избија очи. Кад сам му објаснио да то значи да ће се ускоро наћи још много-много лепих ствари, више није хтео да се игра на сајту док се не појаве те нове много-много лепе ствари….

    Можда да склоните “бета”. Нити деца знају шта то значи, нити морају људи да знају да нисте завршили посао. Можда да ставите “још увек растемо” или сл. А и црвена боја боде очи.

  12. @kdr: Хвала за сугестију око „бете“, која је уклоњена.

    Што се тиче наслова „Вежбанка“ у облацима, више сам циљао на њега као „китњасти“ детаљ у облацима који би деци својим неправилним кривинама деловао опуштеено, него као „уштогљеном“ јасно читљивом тексту. У сваком случају, и ако би фонт наслова био промењен, морао би да буде промењен у бесплатан фонт који садржи слова писане азбуке. Неки предлог?

  13. @kdr: Имам ја велики број фонтова са писаним словима, и ове са ћирилице, али нисам успео да пронађем адекватан а Тесла ми је у том тернутку био у глави. Но, сваки конкретан предлог је добро дошао!

    @vilenjakženski: Па, не баш. Нисам одговорио ни @Ради, ни @Синиши, ни @Славку. Зато ево исправљам грешку па вам свима захваљујем на подршци :) Може? ;)

  14. Super vam je vezbanka i mnogo se lepo igramo. Hvala. Samo evo imamo već devedesetak tačnih odgovora iz matematike a i iz engleskog i ne znamo kad je kraj, kad smo pobedili ? :) malo nam sad dosadilo .. a mnogo sjadak sajt

  15. Super stvar. Ono što mislim da stvarno nedostaje jesu ilustracije – za svako slovo u azbuci po neka sličica, za svaku reč iz engleskog, pa i za matematiku (npr. 3 jabuke i jos 2 jabuke). Jesi li razmišljao o tome da otvoriš projekat? Tako bi lakše mogao i da se ostvari @Sinišin predlog da se pokrije više razreda.

  16. @Damir: Илустрације наравно имам у плану да додам, као и аудио коментаре. Проблем са илустрацијама на који сам наишао је то што нисам нашао одговарајуће илустрације слободне за употребу, а немам довољно вермена (а да будем искрен, ни уметничког умећа) да нацртам илустрације „од нуле“. И то са воћкама у математици сам уградио у једну пробну верзију математике, док још није било све сједињено у Вежбанку, али сам из истог разлога као и за илустрације то уклонио до даљњег.

    Отварање пројекта имам у плану али тек када сав софтверски део конвертујем у Ajax и jQuery, јер је тренутно превише „набацано“ за мој укус :)

    Помоћ у изради илустрација је свакако добро дошла.

  17. Aleksandre savaka čast! Moj prvak nije baš bio vičan u čitanju, a ovaj sajt nam je baš pomogao!!! Posebno ovaj deo sa slogovma! Inače imam jedan predleg, ustvari pitanje: da li bi moglo da se u rečenicama različitim bojama označe slogovi zbog lakšeg uočavanja radi lakšeg čitanja?

Оставите одговор

Ваша адреса е-поште неће бити објављена. Неопходна поља су означена *