Stack-plugin TIMiin #1294

Open dezhidki opened 5 years ago

In GitLab by @vesal on Dec 21, 2018, 15:17

Stack plugin TIMiin. Asiasta lisätietoa esim:

https://tim.jyu.fi/view/tim/TIMin-kehitys/abacus/abacus
[x] kokeile inputkenttien nimeäminen jsx
[x] Maxima images
[x] jos ei ole <div id="div1"> ei toimi [[jsxgraph]]
[x] parametrit kuvien sijainneille
[x] parametrit [[jsxgraph]] .js tiedostojen sijainneille
[x] toimimaan myös jos vektoria l iikutta jsxgraphissa
[x] testattava että matriisi toimii
[ ] estä JS elementissä, mutta salli jsxgraphissa
[x] mieti miten automaattisesti saisi tehtävän id:n esitettäväksi diviksi
[x] suora set ja get client-päähän jsx
[ ] automaattisesti syntyvä muuttuja jsx
[ ] yksisuuntainen liikenne jsx
[x] debug myös konsoliin
[x] template(ja) stack-pluginille
[ ] XML YAML konvertteri paremmaksi , ei saa hukat rivejä yms
[x] käytä oletuksen currentscript (tätä ei voi tehdä, koska on null dynaamisissa skripteissä)
[x] saako T:\www\api\stack\cas\castext\jsxgraphapi.block.php TIMin alle niin että se kulkee sen git pull/push mukana?
[x] miksi stack-api-server ei käynnisty dev-moodissa? - debuggeri kaappasi install.php:n
[x] jos käyttää Show question, niin tulee aina yksi tyhjä vastaus, estettävä
[x] Stack-sisällön tyylit niin, että ei näy taulukoissa oletuksena raameja ja himpiun kokonaisuudessaan sisenntystä
[x] buttonin paikka niin ettei hypi
[x] min/max-height, ehkä kaikille plugineille, scrollable
[x] kysymyksen YAML yamlina
[x] our last answer tulee 2x kun vastaa

In GitLab by @vesal on Dec 22, 2018, 21:55

Kannattaisiko:

https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraphcore.js https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.7/jsxgraph.css

hakea TIMin palveltavaksi?

In GitLab by @vesal on Dec 23, 2018, 13:28

marked the task debug myös konsoliin as completed

In GitLab by @vesal on Dec 25, 2018, 08:49

marked the task template(ja) stack-pluginille as completed

In GitLab by @vesal on Dec 25, 2018, 08:50

marked the task testattava että matriisi toimii as completed

In GitLab by @vesal on Dec 25, 2018, 08:50

marked the task toimimaan myös jos vektoria l iikutta jsxgraphissa as completed

In GitLab by @vesal on Dec 25, 2018, 08:50

marked the task parametrit [[jsxgraph]] .js tiedostojen sijainneille as completed

In GitLab by @vesal on Dec 25, 2018, 19:00

Stack-kontin käynnistymisen ongelma oli se, että jos on PHPStorm kuuntelemassa debuggauksia, niin install.php:n käynistyessä se jotekin ottaa sen kiinni ja skripti ei voi jatkua. Ongelma korjaantui kun ottaa php kuuntelun pois siksi aikaa kun kontit käynistyvät. Ingored files lista ei auttanut?

EDIT: otin DockerfileDebug:ist pois xdebugin asetukset ja asetan ne vasta kun install.php on ajettu. Hyvää on tässä sekin, että nyt konekohtaiset asetukset eivät ole dockerfilessa, vaan /var/www/api/entrypoint_install_and_run.sh joka voidaan siirtää vaikka TIMin puolelle kun se mountataan dockerin käynnistyessä.

In GitLab by @vesal on Dec 25, 2018, 23:06

marked the task kokeile inputkenttien nimeäminen jsx as completed

In GitLab by @vesal on Dec 25, 2018, 23:06

marked the task Maxima images as completed

In GitLab by @vesal on Dec 25, 2018, 23:06

marked the task jos ei ole <div id="div1"> ei toimi [[jsxgraph]] as completed

In GitLab by @vesal on Dec 25, 2018, 23:07

marked the task mieti miten automaattisesti saisi tehtävän id:n esitettäväksi diviksi as completed

In GitLab by @vesal on Dec 25, 2018, 23:07

marked the task suora set ja get client-päähän jsx as completed

In GitLab by @vesal on Dec 27, 2018, 02:31

marked the task buttonin paikka niin ettei hypi as completed

In GitLab by @vesal on Dec 27, 2018, 02:32

marked the task Stack-sisällön tyylit niin, että ei näy taulukoissa oletuksena raameja ja himpiun kokonaisuudessaan sisenntystä as completed

In GitLab by @vesal on Dec 27, 2018, 02:33

marked the task our last answer tulee 2x kun vastaa as completed

In GitLab by @vesal on Dec 27, 2018, 02:34

marked the task jos käyttää Show question, niin tulee aina yksi tyhjä vastaus, estettävä as completed

In GitLab by @vesal on Dec 27, 2018, 02:35

marked the task parametrit kuvien sijainneille as completed

In GitLab by @vesal on Dec 27, 2018, 09:56

marked the task buttonin paikka niin ettei hypi as incomplete

In GitLab by @vesal on Dec 27, 2018, 09:56

buttoni väörin sinakin oddeven esimerkissä

In GitLab by @vesal on Dec 27, 2018, 16:24

marked the task buttonin paikka niin ettei hypi as completed

In GitLab by @vesal on Dec 28, 2018, 09:50

marked the task min/max-height, ehkä kaikille plugineille, scrollable as completed

In GitLab by @vesal on Dec 28, 2018, 19:44

marked the task kysymyksen YAML yamlina as completed

In GitLab by @vesal on Jan 3, 2019, 11:10

Eli tarkoitus on että kun Stack-tehtävän question_html-kohdassa lukee esim:

question_html: |-
  [[jsxgraphapi  width="600px" inputs='ans1']]
      var board = JXG.JSXGraph.initBoard(divid, {boundingbox: [-10, 5, 10, -5], axis: true, showCopyright: false});
      stack_jxg.bind_var('ans1', {on: changeF2});
      var f = board.jc.snippet('{#fx#}', true, 'x', true); 
      board.create('functiongraph', [f,-10,10]);

      var uf2 = null;
      changeF2(JSON.stringify(initVars.values.ans1 || ''));

      function changeF2(s) {
        try { 
         uf = JSON.parse(s);
         if ( uf2 ) board.removeObject(uf2);
         uf2 = null;
         var f2 = board.jc.snippet(uf, true, 'x', true); 
         uf2= board.create('functiongraph', [f2,-10,10], {strokeColor: 'red', fixed: false});
        } catch (ex) {
           // console.log(ex);
        }
      }
      board.update();
  [[/jsxgraphapi]]
  <p>Give formula for above function</p>
  <p>\(f(x)=\) [[input:ans1]] [[validation:ans1]]</p>

niin tuosta [[jsxgraph]] osio menee iframeen, jonka sisältä menee data-urlina ja joka pystyy PostMessageilla kommunikoimaan ympäröivään maailmaan. Tuota varten pitää saada selville esim mihin kohti on generoitunut input-kenttä ans1. Siksi tuon kohdalle tulee html:ään JavaScriptiä:

<iframe id="jsxFrame-stack-jsxgraph-1-div1"...>
</iframe>
<script id="5c2dcdd47945e">

// var quizdiv = document.getElementById('#div1');
// if ( !quizdiv ) quizdiv = document;
new ServerSyncValues(findParentElementFromScript('5c2dcdd47945e', '.csRunDiv', '#div1'),
 '#jsxFrame-stack-jsxgraph-1-div1', 'stackapi_', '', 'S1', 
 {sendInputs:'ans1',initObject:{}}
);
</script>

Tuossa tuo findParentElementFromScript('5c2dcdd47945e', '.csRunDiv', '#div1')lähtee kiipeämään "ylöspäin" nykyisestä skriptistä kunne s löytää joko divin .csRunDiv tai #div1. Sitten kenttiä ans1 jne lähdetään etsimään tästä alaspäin. Tämä siksi, että koko dokumentin sisälle ei tarvitsisi keksiä jokaisen Stack-tehtävän kohdalle omia yksilöllisiä ans1 nimiä yms.

Nyt ongelman on minusta tuo hirveä määrä skripiten sisällä tarvittavia DOMiin kohdistuvia find-operaatioita. Ensimmäisenä tietysti tuon oman skriptin löytäminen. Onko mitään suorempaa tapaa päästä käsiksi noihin elementteihin?

In GitLab by @Smibu on Jan 3, 2019, 11:45

Ei tule äkkiseltään mitään parempaa mieleen.

Mutta onko tuo rivi oikein:

if ( scriptId && scriptId != elem.Id ) elem = document.getElementById(scriptId);

Siinä on Id mutta eikö se ole id?

In GitLab by @vesal on Jan 3, 2019, 11:55

tuo on varmaan väärin :-( Tuo on pakko olla JavaScriptiä, koska tuon pitäisi toimia järjestelmästä riippumatta. Tosin miksei siitä vois jaella sitä käännettyä versiota. Tuon id:n voisi tosin voisi korjata sinne haaraan. Mutta nähtävästi juuri koskaan tuo elem ei ole lähtötilanteessa oikein, koska juuri missään tilanteessa en saanut tuota

var elem = document.scripts[document.scripts.length - 1]; // document.currentScript does not work???

antamaan mitään järkevää, koska tuo nippa nappa toimii kun HTML:ää ladotaan ensimmäistä kertaa, mutta heti kun tuota muokataan tai käytetään, niin scriptien järjestys menee sekaisin eikä kohadlla oleva skripti ole ollenkaan listan viimeinen. Siksi se käytännössä useimmiten joutuu tuossa kohdassa joka tapaksessa tekemään tuon haun skriptin id:n perusteella. Mutta silti tuo kannattaa olla oikein että jos edes tuurilla joskus sattuisi :-)

In GitLab by @vesal on Jan 3, 2019, 11:59

Olisiko tuossa se itse pluginin skripti voinut luoda jonkun globaalin javascriptissä näkyvän muuttujan, jonka arvona olisi ollut suora viite siihen pluginin alkuelementtiin? Silloin ei tarvitsisi etisä ylöspäin.

Jotakin jos plugin tietää oman yksilöllisen id:nsä, niin tyyliin:

var pluginElem_AB1231CFX = ...;

In GitLab by @Smibu on Jan 3, 2019, 12:13

Kyllähän pluginit toki voisivat rekisteröidä elementtinsä johonkin, vaikka tyyliin:

window.pluginElements[this.taskId] = this.element[0];

Sitä en mittaamatta tiedä, olisiko tällä optimoinnilla mitään käytännön merkitystä.

In GitLab by @vesal on Jan 3, 2019, 12:15

window.pluginElements[this.taskId] = this.element[0];

Sitä en mittaamatta tiedä, olisiko tällä optimoinnilla mitään käytännön merkitystä.

Se pitäisi joskus mitata paljonko vie aikaa nuo findByID tms kun on iso dokumentti. Ymmärtääkseni se on yksi reactin juttuja että sillä on oma DOMi vastaava rakenne joka tekee asioista nopeammin.

Eli jos juuresta alakean olevia fideja voi välttää, se voi säästää aikaa? Mutta tuo pitäisi joskus mitata.

In GitLab by @vesal on Jan 3, 2019, 12:20

window.pluginElements[this.taskId] = this.element[0];

Mites sitten tuohon jonkun "tuntemattoman" tuonne sisälle generoima skripti (johon saa itse vaikuttaa) saisi tuon taskId käyttöönsä?

Tosin mun tapauksessa (ja muulloinhan tuolla ei ole merkitystä) pyydän sisällön php:lta ja siihen pyynnön yhteyteen tuon voisi viedä. Valitettavasti se välittäminen vaatii muutoksia myös PHP-koodiin ja se voi vaikuttaa TIM-riippuvaiselta.

marked the task saako T:\www\api\stack\cas\castext\jsxgraphapi.block.php TIMin alle niin että se kulkee sen git pull/push mukana? as completed

TIM-JYU / TIM

Stack-plugin TIMiin #1294