search

CanvasUH / canvasuh.github.io

4 stars 3 forks source link

Ordforklarings pop-Up #4

Closed sigrunNLA closed 4 years ago

sigrunNLA commented 6 years ago

Ønsker muligheten til å forklare ord med en popup, slik at den som leser aldri trenger å gå ut av Canvas for å finne ut av enkelte (forhåndsbestemte) ordforklaringer.

Lignende denne (hentet fra iBooks) https://www.dropbox.com/s/u13ntxn0zsslfol/Skjermbilde%202018-05-30%20kl.%2006.40.01.png?dl=0

Jeg har funnet en måte å gjøre det på (se link), men ønsker ikke en så stor boks rundt ordet. https://esc11.instructure.com/courses/4271/pages/pop-up-dialog-box

For at andre uten HTML kunnskap skal ta det i bruk er det også ønskelig med noe mer brukervennlig.

olabri commented 6 years ago

hva med:

<p title="Dette er en forklaring på teksten">Dette er en tekst.</p>

sigrunNLA commented 6 years ago

Hei, Takk for godt forslag, Olav! Dette er jo mye enklere å få hvermansen til å forstå og bruke. Men det er et problem med hensyn til hvordan man skal få leseren til å forstå hvilke ord man kan "hover over" (finnes det et norsk ord for dette?) Det gis ikke noen indikasjon i teksten. Bold og Italic brukes gjerne i andre sammenhenger og kan trolig ikke brukes. Kanskje et ikon lignende det som er til eksterne linker? (pil ut av boks)

olabri commented 6 years ago

Du kan feks bruke em eller mark? 

Dette er en <em title="Dette er en forklaring på teksten"> tekst.</em>
Dette er en <mark title="Dette er en forklaring på teksten"> tekst.</mark>
sigrunNLA commented 6 years ago

mark forsvant, og jeg måtte ha hjelp av Åshild til å forstå hva jeg gjorde galt. Men hun fant ut at hun kunne bruke css stil på em taggen, og da begynner det å ligne på noe Dette er en <em style="text-decoration: underline dotted;" title="Dette er en forklaring p&aring; teksten"> tekst.</em>

Forøvrig ser jeg at wikipedia har begynt å forhåndsvise alle linker. Det kunne jeg tenkt meg av linker i Canvas også! https://en.wikipedia.org/wiki/Hyperlink Ikke bare er det super smooth. Jeg tror dette er med på å forbedre leseflyten på nett!

etsikt commented 6 years ago

Jeg har laget et tampermonkeyscript som gir deg tooltip: https://github.com/CanvasUH/canvasuh.github.io/blob/master/all/tooltip.js

Du må skrive ordet som skal forklares i klammeparenteser og deretter forklaringen i parenteser rett etterpå, f.eks. slik: ord

Jeg brukte dette som utgangspunkt: https://www.w3schools.com/css/css_tooltip.asp

Jeg har også basert koden på University of Birmingham (UoB) sin kode, ved å bruke onElementRendered for å vite når innholdet på siden er klart.

etsikt commented 4 years ago

Denne tooltip-koden er nå en del av https://github.com/matematikk-mooc/frontend/blob/master/src/js/3party/uob7.js og https://github.com/matematikk-mooc/frontend/blob/master/src/css/3party/canvas-uob.less