diff options
author | markop <marko.pusnik@gurucue.com> | 2015-07-17 10:18:41 +0200 |
---|---|---|
committer | markop <marko.pusnik@gurucue.com> | 2015-07-17 10:18:41 +0200 |
commit | 914d4397eec93dd35030bbdc5ea88239c7b37a9e (patch) | |
tree | 66de389003a8579efff0f35b76acd2a20bcd2c27 | |
parent | 6f587293c10daf63043167d692a4a62343fde7d5 (diff) |
sins
-rw-r--r-- | css/codeq.css | 7 | ||||
-rw-r--r-- | sins.py | 190 |
2 files changed, 196 insertions, 1 deletions
diff --git a/css/codeq.css b/css/codeq.css index 48515c0..f77c850 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -169,4 +169,9 @@ body { ::-webkit-scrollbar-thumb { border-radius: 10px; - -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +} + + + + @@ -0,0 +1,190 @@ +# coding=utf-8 +# najprej opis +description = """\ +<h1>Sins</h1> +<p>Predikat <code>sins(X, SortedList, NewSortedList)</code> naredi seznam <code>NewSortedList</code> tako, da vstavi element <code>X</code> na ustrezno mesto v sortiran (v nepadajočem vrstnem redu) seznam <code>SortedList</code>.</p> +<p>Ta lahko vsebuje podvojene elemente; tudi element x se lahko že pojavi v njem.</p> +<p>Primera:</p> +<p><code> +?- sins(4, [1,2,3,5], L).<br> + L = [1,2,3,4,5].<br> +?- sins(3, [1,2,3,4], L).<br> + L = [1,2,3,3,4]. +</code></p>""" + +# in zdaj hinti +hint = {} # to je komentar +hint['list_empty'] = { + 'type': 'static', + 'message': """ +Kaj se zgodi, če je <code>SortedList</code> prazen?<br> +<svg> xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + viewBox="0 0 150 70" + preserveAspectRatio="xMidYMid" + version="1.1"> + <desc>Animates sorted insert (sins/3) with rectangles.</desc> + + <!-- definiramo sceno --> + + <defs> + <!-- CSS stil: definiramo barve, debeline črt, fonte, ... --> + <style type="text/css"><![CDATA[ + line { + stroke: black; + stroke-width: 0.5; + } + .block { + stroke: black; + stroke-width: 0.5; + fill: none; + } + .dashed { + stroke-dasharray: 2,2; + } + text { + font-family: Verdana, Tahoma, sans-serif; + font-size: 4px; + fill: black; + } + #ri-text, #ri-text-yes, #ri-text-no { + visibility: hidden; + } + ]]></style> + + <!-- puščica na koncu črte --> + <marker id="arrowhead" + viewBox="0 0 10 10" refX="10" refY="5" + markerUnits="strokeWidth" + markerWidth="5" + markerHeight="5" + orient="auto"> + <path d="M 0 0 L 10 5 L 0 10" stroke="black" stroke-width="1.5" fill="none"/> + </marker> + + <!-- obrezovanje (clipping), s katerim je narejena animacija prikazovanja črte, ki se "riše" od leve proti desni --> + <clipPath id="ri-lineClip"> + <rect id="ri-lineClip-rect" x="7" width="0" height="50"/> + </clipPath> + </defs> + + <g transform="translate(0,10)"><!-- vse skupaj (sceno) pomaknemo 10 pixlov navzdol --> + <line x1="0" x2="150" y1="50" y2="50"/><!-- spodnja črta za podlago --> + + <g transform="translate(90,0)"> + <g id="r1" transform="translate(0,0)"><!-- uporabi se transform, ker se le-ta lahko animira --> + <rect width="7" height="10" y="40" class="block"/><!-- najmanjši pravokotnik; uporabimo y za "zapolnitev" vertikale, tako da so vsi pravokotniki enako visoki (lažje animiranje) --> + </g> + <g id="r2" transform="translate(10,0)"> + <rect width="7" height="20" y="30" class="block"/> + </g> + <g id="r3" transform="translate(20,0)"> + <rect width="7" height="30" y="20" class="block"/> + </g> + <g id="r4" transform="translate(30,0)"> + <rect width="7" height="40" y="10" class="block"/> + </g> + <g id="r5" transform="translate(40,0)"> + <rect width="7" height="50" y="0" class="block"/><!-- največji pravokotnik --> + </g> + </g> + + <g id="ri"><!-- skupina za pravokotnik, ki ga vrivamo --> + <rect width="7" height="25" y="25" class="block"/><!-- dejanski pravokotnik / vrivanec --> + <path id="ri-path" d="M 7 37.5 L 75 45" stroke="black" stroke-width="0.5" fill="none" class="dashed" marker-end="url(#arrowhead)" clip-path="url(#ri-lineClip)"/><!-- črta predstavljena z elementom path, ker tega lahko uporabimo tudi spodaj v textPath, npr. elementa line pa ne moremo --> + <!-- besedilo, ki ga "nalimamo" na zgornjo črto/puščico s textPath, ter odgovora "Yes" in "No" v posebnih tspan segmentih, da lahko ločeno kontroliramo njuno prikaznost --> + <text id="ri-text" transform="translate(3,-2)"><textPath xlink:href="#ri-path">Am I bigger than you? <tspan id="ri-text-yes">Yes.</tspan><tspan id="ri-text-no" style="display:none;">No!</tspan></textPath></text> + </g> + </g> + + <!-- spodaj je definirana animacija --> + + <!-- sklop 1: vrivanec se pripelje na sceno in vpraša prvega pravokotnika, če je večji od njega --> + <animateTransform id="animStart" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="15,0" dur="0.8s" additive="replace" fill="freeze" xlink:href="#ri"/><!-- pripelje vrivanca na sceno--> + <animate id="animLine1" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animStart.endEvent+0.5s"/><!-- prikaže puščico --> + <set id="animVisible1" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine1.endEvent"/><!-- prikaže vprašanje --> + <set id="animVisible2" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible1.endEvent+1.5s"/><!-- prikaže odgovor --> + + <!-- sklop 2: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino drugega pravokotnika --> + <set id="animHide1" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible2.endEvent+2s"/><!-- skrijemo puščico --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide1.beginEvent"/><!-- skrijemo vprašanje --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide1.beginEvent"/><!-- skrijemo odgovor "Yes" --> + <set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 40" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide1.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje --> + + <!-- sklop 3: premaknemo prvi pravokotnik za vrivancem, premaknemo vrivanca malo naprej --> + <animateTransform id="animMove1" attributeName="transform" attributeType="XML" type="translate" from="0,0" to="-75,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animHide1.endEvent"/> + <animateTransform attributeName="transform" attributeType="XML" type="translate" from="15,0" to="25,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove1.beginEvent"/> + + <!-- sklop 4: vrivanec vpraša drugega pravokotnika --> + <animate id="animLine2" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove1.endEvent+0.5s"/><!-- prikaže puščico --> + <set id="animVisible21" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine2.endEvent"/><!-- prikaže vprašanje --> + <set id="animVisible22" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animVisible21.endEvent+1.5s"/><!-- prikaže odgovor --> + + <!-- sklop 5: skrijemo puščico in napis ter repozicioniramo konec puščice malo višje: na sredino tretjega pravokotnika, umaknemo "Yes" iz prikaza in namesto njega uvedemo "No" --> + <set id="animHide2" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible22.endEvent+2s"/><!-- skrijemo puščico --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide2.beginEvent"/><!-- skrijemo vprašanje --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- skrijemo odgovor "Yes" --> + <set attributeName="d" attributeType="XML" to="M 7 37.5 L 75 35" dur="0.1s" fill="freeze" xlink:href="#ri-path" begin="animHide2.beginEvent"/><!-- popravimo zadnjo koordinato, da kaže 5 pixlov višje --> + <set attributeName="display" attributeType="CSS" to="none" dur="0.1s" fill="freeze" xlink:href="#ri-text-yes" begin="animHide2.beginEvent"/><!-- izvzamemo odgovor "Yes" iz prikazne strukture --> + <set attributeName="display" attributeType="CSS" to="block" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide2.beginEvent"/><!-- vključimo odgovor "No" v prikazno strukturo --> + + <!-- sklop 6: premaknemo drugi pravokotnik za vrivancem, premaknemo vrivanca malo naprej --> + <animateTransform id="animMove2" attributeName="transform" attributeType="XML" type="translate" from="10,0" to="-65,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animHide2.endEvent"/> + <animateTransform attributeName="transform" attributeType="XML" type="translate" from="25,0" to="35,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animMove2.beginEvent"/> + + <!-- sklop 7: vrivanec vpraša tretjega pravokotnika --> + <animate id="animLine3" attributeName="width" attributeType="XML" from="0" to="68" dur="0.5s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animMove2.endEvent+0.5s"/><!-- prikaže puščico --> + <set id="animVisible31" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animLine3.endEvent"/><!-- prikaže vprašanje --> + <set id="animVisible32" attributeName="visibility" attributeType="CSS" to="visible" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animVisible31.endEvent+1.5s"/><!-- prikaže odgovor --> + + <!-- sklop 8: skrijemo puščico in napis --> + <set id="animHide3" attributeName="width" attributeType="XML" to="0" dur="0.1s" fill="freeze" xlink:href="#ri-lineClip-rect" begin="animVisible32.endEvent+2s"/><!-- skrijemo puščico --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text" begin="animHide3.beginEvent"/><!-- skrijemo vprašanje --> + <set attributeName="visibility" attributeType="CSS" to="hidden" dur="0.1s" fill="freeze" xlink:href="#ri-text-no" begin="animHide3.beginEvent"/><!-- skrijemo odgovor "No" --> + + <!-- sklop 9: premaknemo pravokotnike skupaj: vse pravokotnike na levi premaknemo v desno --> + <animateTransform id="animMove3" attributeName="transform" attributeType="XML" type="translate" to="100,0" dur="1s" additive="replace" fill="freeze" xlink:href="#ri" begin="animHide3.endEvent"/><!-- vrivanec --> + <animateTransform attributeName="transform" attributeType="XML" type="translate" to="-10,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r1" begin="animMove3.beginEvent"/><!-- prvi (najmanjši) pravokotnik --> + <animateTransform attributeName="transform" attributeType="XML" type="translate" to="0,0" dur="1s" additive="replace" fill="freeze" xlink:href="#r2" begin="animMove3.beginEvent"/><!-- drugi pravokotnik --> + + <!-- načeloma manjka še sklop 0, ki resetira stanje v prvotno, če hočemo da je animacija ponovljiva, kar pustimo bralcu za vajo --> +</svg> +""" +} + +hint['new_largest_element'] = { + 'type': 'static', + 'message': "Kaj se zgodi, če vstavljamo nov največji element?" +} +hint['new_lowest_element'] = { + 'type': 'static', + 'message': "Kaj se zgodi, če vstavljamo nov najmanjši element?" +} +hint['y_less_then_x'] = { + 'type': 'static', + 'message': "Manjka veja rekurzije, ki preskakuje elemente, manjše od <code>X</code>." +} +hint['x_compare_list_head'] = { + 'type': 'static', + 'message': "V obeh vejah rekurzije je potrebno primerjati <code>X</code> z glavo seznama, sicer dobimo več (nepravilnih) rešitev." +} +hint['y_less_then_x_add_new'] = { + 'type': 'static', + 'message': "Pri preskakovanju elementov, manjših od <code>X</code>, jih ne doda v nov seznam." +} + +# a drop-down hint must supply the arguments: start (int), end (int), choices (array of string) +hint['drop_down'] = { + 'type': 'dropdown' +} +# a pop-up hint must supply the arguments: start (int), end (int), args (object of key-value args for the template, optional) +hint['popup_unknown'] = { + 'type': 'popup', + 'message': 'nekaj si zabluzil v vrstici [%=row%]' +} +# a static hint can supply an optional argument: args (object of key-value args for the template) +# a static hint can also be defined as a string instead of an object +hint['sample_static'] = { + 'type': 'static', + 'message': 'A sample static hint' +} |