From d5d99688001ab2402b5b0c79b68d2eafb40ff5f9 Mon Sep 17 00:00:00 2001 From: Ludovico Besana <35035423+ludovicobesana@users.noreply.github.com> Date: Sun, 31 Oct 2021 15:19:27 +0100 Subject: [PATCH 01/10] feat: Add favicon and title (#488) --- images/favicon.png | Bin 0 -> 6188 bytes index.html | 5 +++-- 2 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 images/favicon.png diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..9e5b4f6ac5ab75ef5467dcdb59f9db3cc7a0f405 GIT binary patch literal 6188 zcmZ`-2UJsSlfH?eBM`cPf)N3!p(6wckU;3YCxy*0@8cie7k$j{{QaTbI;s)-05&%>tQ=MT+hkj(%9 z7SGoW`Us+f)J9Vc1zi4fATdDnBPo zP{sEqZ*HTgSd1{s^SC2O=R#^!XrtdbDaf-`(<$dlgKwv;viO z8?tNndzNI<24&6JdD+#x+AUDvH!>FrTWjz=LDz?bzpg#}HWq`-z5GW~?Kmn4= z^2mamJO7zu0TQK!QU;#ED5fNJ2L|O+sUz#%>MczBJibkb3*7#DS^*2~I}E#dL-OzQ zps$f!${GNez#MAd$u+LT4=IufjKH)f!`${j04O;GePgebEHInw z#hS_S`(O|T`fLRXHQHO8}q@DKSdB{FVw!)iUT7%qSU3UMn*1wU(O zSBKDft^P@`rYC8(b!U!*jrpM=f9<;h3!Yw#+@h<1b17R}cE1=9Wd5RVLQh99nvoav z9VK~i2u1?-JOJdk5df+rkD|ytVgNDTxtYQT({GlY_a%haDn+9#R(Rtp7|8Gk)BqP9 zhVTqOdNI)o&>2=gCtZ52%lD z@r~v;{D~|N1`){fjm=5@G8Mt?g5!Zvu{lW8R`sugjfM_863q7yh64gut^4qu)2jx&Uwx9UCImQ&=VCuxh_FL54O%2jW>g@(ZNRp)zHyOVRYs5I(w@S2z!W@WlJ zbTP_{K$WsJ7>zuYN2X6-$~p7$@ZB`v`T{@^xCZ`Db^=&;NiJ9UT0cx_^NXpACtAaa zFJ0$W$oU?hU2Nihy?OL)`eFnH|CLj1vfOi-GsD@mWvpBy^8uMIwHF^evE##sielR%Dm_p0^4?vSt9=VjG1y{+ratYVmma?GwGaMz%>E-& z#5L^|N$1LId8%3Es5mA_%K^_&pLx~WAZONJj9eQ8)ze(CBeVehStjF)lSb<j?ON;JX_m9U;^q#&U8z?;#!3ow6 zw^F!Pe%iS36VCYk!?QTn@Gm=ao#|Hg(>mSE)w4rV`s`Q)2`OWw$a#(7 z7^hkPOkZ@~HFf8sz#?PhR=q6<1;&qEXiBU23et$YlGo}(_?K7CpDNf?vQAF3TYT7_ z>zFd+e3Tmsu!amrO;`YBj0hY6>w>M~6XVEDd}pahfyaPz-)BJNL6Bpj7Av~IU6MZ^IRQ!=*jAa(gbo0VC~<_& zed2aH*M@<`7uKgfY$0fII2c4)J%h;mU5epCRUmA z{ypvb>^ryd%L-q=zgTD=S^b&wTR-yz~)R-LIR{+I0 zWQD80eG@gAkiRE@oVl8&QLr1hbByp?pNx3(<|dzBwu@xg;MZc>>UffTzxCDft~sQm z5RCn4&iB>LJw$|eI3FG%9?b=_DPvekhaR+mulxSi;*YAN4cki;TlRw4K-*?#IZA6b zL~cc*U=bTLbvQhpF=CT@Z25+ObV(X~C5>}+rB+?5LoMz2 zxz{w9Oltnj81>%x*izl7Q-vRE`Mz>p(?(uP_$ty-icPT3!x4FlEes+}bAUp1B z@Q*acHZ3D_BoitaDxxr*^URu)6$TzMMJ}+`;lehu*!>#^q37g0m$r%@-PK7bR`EKY zJ3%|-%He!a$M70%k5TaLZ#A8jmVs^01;U4x^w+8nG(E~`n^fFkm(o*`md1T^I(@gFg|1&T zp~w1*6CbXn3o8R!W-s~5U;LHdyPm^#6sL|_U0YLe4O$+uF9>0%Y#J#8UoNmHL@=u? z$p>^1zGKSg6f9-sCQLof3#)sahWS|YJ|mT!=zzz9YEbdY3VLW4jNit@Bq#IeOI7jm zo&A@EU&mm%GaUo@n;`^h}++Ou*Tk8US1xV znDAFpfGUZ-K*?sZIWs2sPucIrEKagIt0h}LxTARH^;wO&Mea`AAm}fKKeUjC4XaeP zHQCYQCw5?Jz8|G1<7GRS73_Df;k?yv5Lq%<^{cq!aHDOUA^2y(m(AM!=}YEiEh{Td zzl~{q{b1N*$Ow6 zwaU3*Ps95QEa3L@*orLXNEhRoQ?s7 zJSx8#ywO7{WGl{b%OA2Obfpa1l9o6OHQh?@ZRzG=jZBd0^Ut0`CPMq0VkX_ft<9pz zK-@R!k=D$#f3sc+?NJlpTb)axQ6l~o3bCWpUMukg6OX2Pj z%Z{Akd&GVM?Lt;|@Zt$HN5L1&^Tc{7Fc=!!O6?WZWdp^s)^>~!yc3S*Z?|Vi(m=n0 zpAlZkomyh=(PEfkAmB><&SWgub8(U5ASt_h1Q~>#FBV_jH>HK>s)*gdejsZ~3h(=_ zTQ0Yy=+D@A?T3|A|BYF0n4@C24);N-$=sFjpytQN$H%*YLjzguPol`Y&L%~T;?XHS z9X1;q*3#6=j3@-AaMvsR*!jxvjSN(s4O|EQ)${1Ua5Lk{i)G2mUAy|?8|aXLTYq?Y zU-1z3<30pu+zZZnba4^NS72SHvb{ca`+JwSHBj_1*}vIW&L-4>wu~uSyNx>>Mqr~J z&&-*$InkN=c}QcjW!7AD-1FnmsywYsq}NzmyYz8#hbE6wHv)}yF?bzpSY)L9VG0F% zf|PxQM!Z1PSp4nN3If9w9(4XTxH@Gt;`Dh?(yYbG_9Pz0LHZ7)7f>7Xn*l9+l{;-c zWOJ?MQYAYClFFbx8}|NvvXRPAFn4l@?S5Ci^C_erlwr&N4IzKd%Mr^7EASlCmc}l0 zC(%K*IOOAt7J3>DFrXCm?(JjUCYIp8Aq@E)0ZqUVrA{rYZe7L=5xI~VwoR?}F)^#M zV^Qs1q`t78gf00iu1Ragt7cDr7pL~LD88q0O^lm4pZ{b0#Z>;Tbc-*f;Cai0MDIAR z;=oGWr%I2{`ut>nn7HS9IQ(DIw7AZYqlB5Tr(A2mR$hS8;w`Ehi-p8#dBr`FG?I)`me>9^ylVOtKIJsuZ3g<&5de9e3E0l%rA ztvq~WKG@M7GIMr@U`rx3C}Mp2oBC;yghrQ*>1+y4HIE4d$SL)L4PhBPxk^{A8AnSz zSdQZX*a%MTe&Kaj%&Lx+!o{M?UfM#`Nvz5&Rh-acW4^G6$@DVbjf>}p?F}<82YKSV zU_@rbu!>Z6Pe|otS|mT(!g-p7UC&C$Jkak)LmsRlpUG~FvaY*&c7frqRP;uCioWS+ zJHw~DZ5Dh1MQuBE4!4ej?+#{omPkJeL@N#n(T0HyvyUZ==w=<(_SItUD$2+Zi2eQ( zYm|3UwCUld$~dK|rCyoCqdK>c%h9~l%dpMop)A2S&Ng;?T22cd={tzABcwA#ogI|> zA5huMz9SDL33v{df)LE~d_I*jaKy9fN=Ii2#L8?ri|fxW#ssXjo@5$}U&NCD({Cu4 zAm{p(N7BOae-pZFCTm<+s-^@>lRS?;fd(?~Hny`v=TDPi*_XGSCHs?ZXB8K=9H}$H z3~*krhL1nqRQ>pscU>x8ilLK??w)EdDAmNX6TD!Yu-k)u9I@gua=dv+Gl zUhdBUjczqNc3$p2VPT4Xe`hI%clAn)w*Is{bd+N2Z>=z}W8GYPh6&+09HVVA3O!LT z%E~Yk$CZ&jxMsd9b}vKgtzgZx+xo1|3J0-6{@RwQ7JX;T|IWB1vq+mi(nNf#shJUy zZ7{XYDZM<@@-|UviHvMw+VVl6K*F94dn`Q6I&4srr&UKPNS8IX(x#Ho($W&6pmf8h zP}hp1-$_@?B?7Lip{-QJneuJ8oi@w3XdD}Mcs*@(6>5FJxNH>^TIN>6k4J|eUpf6* zFvc|;9DBbE*M5*rq|$yR)pq#M_T+?4lUuLE1e+KkN($Yr<~z6J+eZX0!$Uj_dKP?s zd}@d-nGg+IrGxu=FU6eREOhBNGDgs}hFQ0Nb=LhfZB9I4^(~2!l9JMO+L$RyM4PbY ziad{6Ih7HWG?sbbaz^{Llrz|;D1K#lFjZc({+m?&TYTB0CqEwYI={bB-M8DKq%mmj zqA$pN6UGIjcKea&hRgd*OU;$pnZNH|r>*dH-h1%Zbie1C7fR~9= zRIu`|&V0}NS;~s&p`AF<{HMK*#@13L!b3GpKURx@U>&Xb0;}`GT=`4RG=mRAcNr;T z67DOaAO@7GC2pi4h0ioUU#=#X)d+oyF8|B4Z484PhrSE=#WdlHAX~X%hS2jVS8$YI z%Xs;+ePBSVo#LQVO|`{9?yPuwA&&J9$wDAF4_(b{p!$qQroTPqpj%>tB1?Gy_O0!n z0Ea5Lu|lE4Q9p}pN1hdzgFkJi{56uryLgST67kTAZWjx_avcJzl;Kwtou%R<)S-o8 z=|UM>lAH4-jw)HsmB!7*UK(+uA0?ZFawD=@*>gspff2!lveVQD4NAS$!FQQ_f923j*xRUkQ?+SVxUd~wcJ8$Dy7kEPQk8xi zcqL8C#T?N8;^0GZK#MBR^+%iR&Qcv0@0ePW-0;~YCMOh#R~(I%jy7I#%bEfW!^Pwy zuMr@{)EF8YJNKHuOv~EO`&|;d-)f)BYzBoAxM1A$pfA5=qS2DZZD zf?QgQovA*VXq<+r^iCZ=@dP-b7`~Y4Q53_#VBS^V=t<$PhMKHsp^aJ-(<^Rv+}nv` zF6h7B!?a`Z=f0^zGmLqG^OTj?GF;Yb)TZivJq8$($tJ6dI9nWqOSP87)<#)Qw-R=&-tIiGz*_y8 zPPlj?J!{1LAd=a8oc$(c41Z}275h#xp*j>zc5$iyd++io-%HvR**Pa9tV42C?AI}6EvU|sE;P&6?E&l2k zc|gT*@PB8a|78*QnGFiPa>Q^N$eK=^?%u|u&G5EZyqzr0+m5IJF}RqhkSJV8T+~QZ zTvkF%R#ZX&4wr?)MTCym{w=`G!`8_@@c$36^i(n>25|k8!N1?pe`8FYZ1Il&K*maMk`p1<{sp4#bd=pt_JcvlYx5qqqk6VAikN92EAxrh{20%s>KVT+X#v$qk&!tF)H m?%K+TV(lgG!lk7pB!!6)!o>OlP;c?X41hXX2UV_Y9r+)`tVWpt literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 202a4877..c7868a1a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,12 @@ - Document + Web Dev for Beginners - + +
+``` + +> Nota: use `defer` ao importar um arquivo JavaScript externo para o arquivo html, de modo a permitir que o JavaScript seja executado somente depois que o arquivo HTML tiver sido totalmente carregado. Você também pode usar o atributo async, que permite que o script seja executado enquanto o arquivo HTML está sendo analisado, mas, em nosso caso, é importante ter os elementos HTML totalmente disponíveis para arrastar antes de permitir que o script de arrastar seja executado. + +--- + +## Os elementos DOM + +A primeira coisa que você precisa fazer é criar referências aos elementos que deseja manipular no DOM. No nosso caso, são as 14 plantas que aguardam atualmente nas barras laterais. + + +### Tarefa + +```html +dragElement(document.getElementById('plant1')); +dragElement(document.getElementById('plant2')); +dragElement(document.getElementById('plant3')); +dragElement(document.getElementById('plant4')); +dragElement(document.getElementById('plant5')); +dragElement(document.getElementById('plant6')); +dragElement(document.getElementById('plant7')); +dragElement(document.getElementById('plant8')); +dragElement(document.getElementById('plant9')); +dragElement(document.getElementById('plant10')); +dragElement(document.getElementById('plant11')); +dragElement(document.getElementById('plant12')); +dragElement(document.getElementById('plant13')); +dragElement(document.getElementById('plant14')); +``` + +O que está acontecendo aqui? Você está referenciando o documento e olhando através de seu DOM para encontrar um elemento com um Id específico. Lembra na primeira lição sobre HTML que você deu Ids individuais para cada imagem de planta (id = "plant1")? Agora você fará uso disso. Depois de identificar cada elemento, você passa esse item para uma função chamada dragElement que construirá em um minuto. Portanto, o elemento no HTML agora está ativado para arrastar, ou será em breve. + +✅ Por que referenciamos elementos por Id? Por que não por sua classe CSS? Você pode consultar a lição anterior sobre CSS para responder a esta pergunta. + +--- + +## O Closure(fechamento) + +Agora você está pronto para criar o closure(fechamento) dragElement, que é uma função externa que inclui uma função ou funções internas (em nosso caso, teremos três). + +Os closures(fechamentos) são úteis quando uma ou mais funções precisam acessar o escopo de uma função externa. Aqui está um exemplo: + +```javascript +function mostrarDoce(){ + let doce = ['jujubas']; + function adicionarDoce(tipoDeDoce) { + doce.push(tipoDeDoce) + } + adicionarDoce('gomas'); +} +mostrarDoce(); +console.log(doce) +``` + +Neste exemplo, a função mostrarDoce envolve uma função que coloca um novo tipo de doce em uma matriz que já existe na função. Se você executasse este código, o array doce seria indefinido, pois é uma variável local (local para o fechamento). + +✅ Como você pode tornar o conjunto de doces acessível? Tente movê-lo para fora do fechamento. Dessa forma, o array torna-se global, ao invés de ficar disponível apenas para o escopo local do fechamento. + +### Tarefa + +Nas declarações de elemento em `script.js`, crie uma função: + + +```javascript +function dragElement(terrariumElement) { + //definir 4 posições para posicionamento na tela + let pos1 = 0, + pos2 = 0, + pos3 = 0, + pos4 = 0; + terrariumElement.onpointerdown = pointerDrag; +} +``` + +`dragElement` obtém seu objeto `terrariumElement` das declarações na parte superior do script. Em seguida, você define algumas posições locais em 0 para o objeto passado para a função. Essas são as variáveis ​​locais que serão manipuladas para cada elemento à medida que você adiciona a funcionalidade de arrastar e soltar no fechamento de cada elemento. O terrário será preenchido por esses elementos arrastados, então o aplicativo precisa manter o controle de onde eles são colocados. + +Além disso, o terrariumElement que é passado para essa função é atribuído a um evento pointerdown, que faz parte das [APIs da web](https://developer.mozilla.org/docs/Web/API) projetadas para ajudar no gerenciamento de DOM. `Onpointerdown` dispara quando um botão é pressionado ou, em nosso caso, um elemento arrastável é tocado. Este manipulador de eventos funciona em [navegadores web e mobile](https://caniuse.com/?search=onpointerdown), com algumas exceções. + +✅ O [manipulador de eventos onclick](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) tem muito mais suporte para vários navegadores; por que você não usaria aqui? Pense no tipo exato de interação de tela que você está tentando criar aqui. + +--- + +## A função Pointerdrag + +O terrariumElement está pronto para ser arrastado; quando o evento `onpointerdown` é disparado, a função `pointerDrag` é chamada. Adicione essa função logo abaixo desta linha: `terrariumElement.onpointerdown = pointerDrag;`: + +### Tarefa + +```javascript +function pointerDrag(e) { + e.preventDefault(); + console.log(e); + pos3 = e.clientX; + pos4 = e.clientY; +} +``` + + +Várias coisas acontecem. Primeiro, você evita que os eventos padrão que normalmente acontecem em pointerdown ocorram usando `e.preventDefault ();`. Dessa forma, você tem mais controle sobre o comportamento da interface. + +> Volte a esta linha quando tiver criado o arquivo de script completamente e tente sem `e.preventDefault()` - o que acontece? + +Em segundo lugar, abra `index.html` em uma janela do navegador e inspecione a interface. Ao clicar em uma planta, você pode ver como o evento 'e' é capturado. Explore o evento para ver quanta informação é coletada por um evento de ponteiro para baixo! + +A seguir, observe como as variáveis ​​locais `pos3` e `pos4` são definidas como e.clientX. Você pode encontrar os valores `e` no painel de inspeção. Esses valores capturam as coordenadas xey da planta no momento em que você clica ou toca nela. Você precisará de um controle refinado sobre o comportamento das plantas ao clicar e arrastá-las, para manter o controle de suas coordenadas. + + +✅ Está ficando mais claro por que todo esse aplicativo é construído com um grande fechamento? Se não fosse, como você manteria o escopo para cada uma das 14 plantas arrastáveis? + +Conclua a função inicial adicionando mais duas manipulações de eventos de ponteiro em `pos4 = e.clientY`: + +```html +document.onpointermove = elementDrag; +document.onpointerup = stopElementDrag; +``` + +Agora você está indicando que deseja que a planta seja arrastada junto com o ponteiro conforme você a move e que o gesto de arrastar pare quando você desmarcar a planta. `onpointermove` e `onpointerup` são partes da mesma API que `onpointerdown`. A interface lançará erros agora, pois você ainda não definiu as funções `elementDrag` e `stopElementDrag`, então crie-as a seguir. + + +## As funções elementDrag e stopElementDrag + + +Você completará seu fechamento adicionando mais duas funções internas que irão lidar com o que acontece quando você arrasta uma planta e para de arrastá-la. O comportamento que você deseja é que você possa arrastar qualquer planta a qualquer momento e colocá-la em qualquer lugar da tela. Esta interface é bastante neutra (não há zona de queda, por exemplo) para permitir que você projete seu terrário exatamente como você gosta, adicionando, removendo e reposicionando plantas. + +### Tarefa + +Adicione a função `elementDrag` logo após a chave de fechamento de `pointerDrag`: + +```javascript +function elementDrag(e) { + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + console.log(pos1, pos2, pos3, pos4); + terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px'; + terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px'; +} +``` +Nesta função, você edita várias vezes as posições iniciais 1-4 que definiu como variáveis ​​locais na função externa. O que está acontecendo aqui? + + +Conforme você arrasta, você reatribui `pos1` tornando-o igual a `pos3` (que você definiu anteriormente como `e.clientX`) menos o valor atual de `e.clientX`. Você faz uma operação semelhante à `pos2`. Em seguida, você redefine `pos3` e `pos4` para as novas coordenadas X e Y do elemento. Você pode observar essas mudanças no console enquanto arrasta. Em seguida, você manipula o estilo CSS da planta para definir sua nova posição com base nas novas posições de `pos1` e `pos2`, calculando as coordenadas X e Y superior e esquerda da planta com base na comparação de seu deslocamento com essas novas posições. + +> `OffsetTop` e `offsetLeft` são propriedades CSS que definem a posição de um elemento com base na posição de seu pai; seu pai pode ser qualquer elemento que não esteja posicionado como `static`. + +Todo este recálculo de posicionamento permite afinar o comportamento do terrário e das suas plantas. + +### Tarefa + + +A tarefa final para completar a interface é adicionar a função `stopElementDrag` após a chave de fechamento de `elementDrag`: + +```javascript +function stopElementDrag() { + document.onpointerup = null; + document.onpointermove = null; +} +``` + +Esta pequena função redefine os eventos `onpointerup` e `onpointermove` para que você possa reiniciar o progresso de sua planta, começando a arrastá-la novamente, ou começar a arrastar uma nova planta. + +✅ O que acontece se você não definir esses eventos como nulos? + +Agora você concluiu seu projeto! + +🥇 Parabéns! Você terminou seu lindo terrário. + +![terrario terminado](../images/terrarium-final.png) + +--- + + +## 🚀Desafio + +Adicione um novo manipulador de eventos ao seu fechamento para fazer algo mais para as plantas; por exemplo, clique duas vezes em uma planta para trazê-la para a frente. Seja criativo! + +## Quiz pós-leitura + +[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) + +## Revisão & auto-estudo + +Embora arrastar elementos pela tela pareça trivial, existem muitas maneiras de fazer isso e muitas armadilhas, dependendo do efeito que você busca. Na verdade, existe toda uma [API de arrastrar e soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) que você pode experimentar. Não a usamos neste módulo porque o efeito que queríamos era um pouco diferente, mas experimente esta API em seu próprio projeto e veja o que você pode conseguir. + +Encontre mais informações sobre eventos de ponteiro nos documentos [W3C](https://www.w3.org/TR/pointerevents1/) e [MDN web docs](https://developer.mozilla.org/pt-BR/docs/Web/API/Pointer_events). + +Sempre verifique os recursos do navegador usando [CanIUse](https://caniuse.com/) + +## Tarefa +--- + +[Trabalhar um pouco mais com o DOM](assignment.pt.md) + From 09ed237e0690464fa9b00ccdcebd0553075f35b1 Mon Sep 17 00:00:00 2001 From: Art-auto <30954131+Art-auto@users.noreply.github.com> Date: Sun, 31 Oct 2021 18:23:31 +0200 Subject: [PATCH 10/10] Update iso language abbreviation for Ukrainian (#491) * Add translation for "for-teachers.md" file * Use "uk" for ukrainian as of ISO 639-1 standart --- translations/for-teachers.uk.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 translations/for-teachers.uk.md diff --git a/translations/for-teachers.uk.md b/translations/for-teachers.uk.md new file mode 100644 index 00000000..7d181255 --- /dev/null +++ b/translations/for-teachers.uk.md @@ -0,0 +1,33 @@ +## Для вчителів + +Що робити, якщо ви хотіли б ви використовувати цю навчальну програму у своєму класі? Будь ласка, не соромтеся! + +Насправді, ви можете використовувати його в самому GitHub, використовуючи GitHub Classroom. + +Для цього створіть форк цього репозиторію. Вам потрібно буде створити репозиторій для кожного уроку, тому вам потрібно буде розпакувати кожну папку в окреме репо. Таким чином, [GitHub Classroom](https://classroom.github.com/classrooms) може підхопити кожен урок окремо. + +Ці [вичерпні інструкції](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) нададуть вам уявлення про те, як налаштувати вашу класну кімнату. + +## Використання в Moodle, Canvas або Blackboard + +Ця навчальна програма добре працює в цих системах управління навчанням! Використовуйте [Moodle файл](/teaching-files/webdev-moodle.mbz) для повного контенту, або спробуйте [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) який містить деякий контент. Moodle Cloud не підтримує повні Common Cartridge експорти, тому бажано використовувати Moodle download файл, який може бути завантажений в Canvas. Будь-ласка повідомте як ми можемо це покращити. + +![Moodle](/teaching-files/moodle.png) +> Розклад в Moodle classroom + +![Canvas](/teaching-files/canvas.png) +> Розклад в Canvas + +## Використання репозиторію самостійно + +Якщо ви хочете використовувати цей репозиторій у його теперішньому вигляді, не використовуючи GitHub Classroom, це також можна зробити. Ви маєте поговорити зі своїми учнями, який урок опрацювати разом. + +В онлайн-форматі (Zoom, Teams або інший) ви можете створити кімнати для тестів і наставляти учнів, щоб допомогти їм підготуватися до навчання. Потім запросіть студентів взяти участь у вікторинах і подайте свої відповіді як «проблеми» в певний час. Ви можете зробити те ж саме із завданнями, якщо ви хочете, щоб учні працювали спільно на відкритому повітрі. + +Якщо ви віддаєте перевагу більш приватний формат, попросіть своїх учнів форкнути навчальну програму, урок за уроком, до власних репозиторій GitHub як приватних репозиторій і надати вам доступ. Потім вони можуть приватно виконувати вікторини та завдання та надсилати їх вам за допомогою issues у вашій аудиторії. + +Існує багато способів зробити це в форматі онлайн-класу. Будь ласка, повідомте нам, що найкраще підходить для вас! + +## Будь ласка, висловіть нам свої думки! + +Ми хочемо, щоб ця навчальна програма працювала для вас і ваших учнів. Будь ласка, залиште нам [відгук](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).