![]() |
Neurochirurgie minim invazivă
"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv. Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice. www.neurohope.ro |
4 optiuni clickabile
Last Updated: Apr 27 2023 11:56, Started by
leny29
, Apr 25 2023 22:31
·
0
![](https://forum.softpedia.com//public/style_images/classic/icon_users.png)
#1
Posted 25 April 2023 - 22:31
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
Salut,
Intr-un site Drupal 7 ma chinui sa creez ceea ce credeam sa fie simplu patru optiuni ordonate frumos intr-un patrat cu un chenar in jurul fiecarei optiuni si cu textul in mijloc. Aici am creeat un code pen: https://codepen.io/m...dor/pen/jOeBYwa La baza e un form cu radio buttons. Ma chinui sa tin tag-ul <a> din <label> cat mai mare ca atunci cand userul da click oriunde pe optiune respectiva sa dea de fapt click pe link nu pe o parte din label care sa nu fie acoperita de link. Cand dau click pe link porneste un javascript care face play la fisierul audio corespunzator optiunii clickate. E vre-o alta metoda in html si css sa pot sa propun patru raspunsuri posibile din care userul sa aleaga numai una. Acum am o lista simpla un <ul> cu cele patru optiunii. Dar mi se pare outdated, adica asa era in anii 90-2000, acum in 2023 trebuie sa fie mai user friendly de aia ma gandeam eu ca toate cele patru optiuni sa fie dispuse in forma de patrat si fieare sa aiba o suprafata mai mare nu doar textul optiunii respective. Asta am incercat sa fac in code-pen-ul de mai sus. Am asa o senzatie ca ceea ce vreau, daca as intreba un guru mi-ar spune ca e asa de usor, si ca eu imi complic viata inutil... de aia am zis sa va intreb sa nu ratez alte alternative evidente. Va multumesc |
#2
Posted 26 April 2023 - 00:22
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
De ce nu folosesti un player?
De ex: https://www.codehim....-with-playlist/ https://code-boxx.co...layer-playlist/ Si mai gasesti destule exemple... |
#3
Posted 26 April 2023 - 09:40
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
Eu nu am inteles exact care este rolul acelor input-uri radio. Cel putin din exemplul tau de pe codepen, la click pe label te duce pe linkul respectiv unde este fisierul mp3, asa ca de ce nu folosesti direct linkurile? Mai jos un exemplu:
HTML: <div class="wrapper"> <a href="option1.mp3">Option 1</a> <a href="option2.mp3"> Option 2 that has a very long text that<strong>a</strong> should be broken down on several lines if it <strong>becomes</strong> too long for the display, I still need to type something more, like Lorem ipsum to make this text longer and display it on several lines</a> <a href="option3.mp3">Option 3</a> <a href="option4.mp3">Option 4</a> </div> CSS: .wrapper { display: grid; grid-template-columns:repeat(2, 200px); gap: .25rem; } a { display: grid; place-items: center; width: 100%; height: 100%; padding: .5rem; background-color: forestgreen; text-align: center; color: white; text-decoration: none; } Explicatie: tagurile de tip ancora <a> au nativ display inline, iar din aceasta cauza nu le poti modifica latimea si inaltimea blocului din care fac parte. Din aceasta cauza am modificat in display grid (functiona si cu display block, dar am pus grid pentru a centra textul), apoi am pus latimea si inaltimea sa fie 100%, cat este blocul rezultat din grid-ul aplicat elementului wrapper. Daca am inteles gresit rolul acelor input radio, te rog sa imi comunici. Semantic HTML, cred ca este corect ca acele ancore pe care le-am pus sa fie in interiorul unui div, iar acel div sa preia proprietatile CSS de la ancora. O alta varianta ar fi sa te folosesti de Javascript si sa pui event "click" pe div-ul din care face parte ancora, astfel la click pe element sa se deschida linkul respectiv. Nota: In CodePen vezi ca ai niste erori, de exemplu nu ai inchis ultimul tag <a> de la optiunea 4 si folosesti aceeasi clasa exercises atat la parinte, cat si la label. Edited by G1q, 26 April 2023 - 09:41. |
#4
Posted 26 April 2023 - 13:12
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
De ce nu folosesti un player? De ex: https://www.codehim....-with-playlist/ https://code-boxx.co...layer-playlist/ Si mai gasesti destule exemple... Multumesc, Si mai bine e cu tagul <audio> acum folosesc un player se numeste soundmanager2, bazat pe javascript, dar ca sa-l debughez e oroare... Intrebarea mea era pe partea de HTML si CSS. Mi-am dat seama ca nu am fost suficient de clar in intrebarea mea. |
#5
Posted 26 April 2023 - 13:31
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
Eu nu am inteles exact care este rolul acelor input-uri radio. Cel putin din exemplul tau de pe codepen, la click pe label te duce pe linkul respectiv unde este fisierul mp3, asa ca de ce nu folosesti direct linkurile? Mai jos un exemplu: HTML: <div class="wrapper"> <a href="option1.mp3">Option 1</a> <a href="option2.mp3"> Option 2 that has a very long text that<strong>a</strong> should be broken down on several lines if it <strong>becomes</strong> too long for the display, I still need to type something more, like Lorem ipsum to make this text longer and display it on several lines</a> <a href="option3.mp3">Option 3</a> <a href="option4.mp3">Option 4</a> </div> CSS: .wrapper { display: grid; grid-template-columns:repeat(2, 200px); gap: .25rem; } a { display: grid; place-items: center; width: 100%; height: 100%; padding: .5rem; background-color: forestgreen; text-align: center; color: white; text-decoration: none; } Explicatie: tagurile de tip ancora <a> au nativ display inline, iar din aceasta cauza nu le poti modifica latimea si inaltimea blocului din care fac parte. Din aceasta cauza am modificat in display grid (functiona si cu display block, dar am pus grid pentru a centra textul), apoi am pus latimea si inaltimea sa fie 100%, cat este blocul rezultat din grid-ul aplicat elementului wrapper. Daca am inteles gresit rolul acelor input radio, te rog sa imi comunici. Semantic HTML, cred ca este corect ca acele ancore pe care le-am pus sa fie in interiorul unui div, iar acel div sa preia proprietatile CSS de la ancora. O alta varianta ar fi sa te folosesti de Javascript si sa pui event "click" pe div-ul din care face parte ancora, astfel la click pe element sa se deschida linkul respectiv. Nota: In CodePen vezi ca ai niste erori, de exemplu nu ai inchis ultimul tag <a> de la optiunea 4 si folosesti aceeasi clasa exercises atat la parinte, cat si la label. Multumesc frumos, O sa incerc codul propus si apoi revin cu un feedback. Imi dau seama ca nu am fost suficient de clar in intrebarea mea. Eu vreau sa fac patru optiuni din care una sa fie cea corecta. Codul asta e integrat intr-o intrebare si cele patru sunt patru variante de raspuns. Sa zicem ca un student are de raspuns la 10 intrebari. Pentru fiecare intrebare o sa aiba patru variante de raspuns si el/ea trebuie sa o aleaga pe cea corecta. Link-ul spre un mp3 e de fapt fake, adica e un javascript care face play la fisierul mp3 corespunzator, dar userul ramane pe pagina si el da click pe optiunea care crede ca e corecta. De aici vine input radio, ca in HTML sa m un form in care sa primesc raspunsul studentului, si apoi sa verific in php in Drupal 7 daca userul a raspuns corect sau nu. Si vreau ca optiunile vizual vorbind sa nu fie doar textul propriuzis pentru fiecare optiune "Option 3" ca userul sa nu se chinuie sa dea click exact pe text, ci sa fie o zona in care sa apese, zona identificata de background-ul verde. Pot sa centrez tot tag-ul <a> in <label> dar atunci tag-ul <a> o sa fie mai mic .exercises label.option { display: flex; justify-content: center; min-height: 15vh; min-width: 15vw; align-items: center; margin: 0; cursor: pointer; } .exercises label.option a { display: inline; background: white; justify-content: center; min-width: 15vw; /* min-height: 15vh; */ text-align: center; /* line-height: 3; */ word-wrap: break-word; } adica am scos min-height de pe <a> si l-am pus in label. Si asa se centreaza textul in label pentru ca de fapt e centrat tot tagul a. Dar asta inseamna ca <a> ul meu o sa fie inalt cat textul care il contine si label-ul mai inalt. Asta inseamna ca daca cineva da click intr-o optiune exact pe textul "Option 1" o sa selecteze optiunea respectiva si o sa si auda fisierul option1.mp3 cand face play. Dar daca da click pe partea verde adica pe label dar un pic mai sus sau mai jos decat textul din tag-ul <a> atunci selecteaza raspunsul cu Option 1, dar nu mai aude fisierul mp3 care e trigaruit cand cineva da click exact pe link. Cum spui si tu as putea sa fac cu un javascript cand cineva da click pe tot labelul sa fac play la mp3, dar as prefera fara javascript pentru ca javascript-ul de la soundmanager e destul de complicat si ar trebuie sa inteleg exact cum merge sa pot sa fac play la clickul de pe label. Si eu ma intrebam poate exista o alta varianta mai buna, fara <input radio>. Ce am eu e sa ai o intrebare : Unde se afla Bucurestiul: 1) in nordul Romaniei 2) in sudul Romaniei 3) in estul Romaniei 4) in vestul Romaniei si apoi cand apesi pe unul dintre raspunsuri sa se si auda: "in nordul Romaniei" Sper ca acum e mai clar. Daca nu pot sa explic mai mult sau sa pregatesc niste exemple. Multumesc pentru feedbac-ul cu greselile din codepen o sa le corectez. Multumesc frumos |
#6
Posted 26 April 2023 - 19:26
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
Când vrei sa se audă acel MP3? Când selectează răspunsul, când da click pe un buton de submit form sa zicem?
Audio va rula la orice selecție chiar daca e greșit răspunsul sau doar la cel corect? |
#7
Posted 26 April 2023 - 22:11
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
Când vrei sa se audă acel MP3? Când selectează răspunsul, când da click pe un buton de submit form sa zicem? Audio va rula la orice selecție chiar daca e greșit răspunsul sau doar la cel corect? Audio-ul trebuie sa se auda cand da click pe o optiune chiar daca nu e raspunsul corect. Nu am buton separat de submit, e un call ajax cand da click pe optiune care verifica daca raspunsul e corect sau nu si ii da un feedback utilizatorului. Play-ul pe optiune merge deja e bazat pe soundmanager2, intrebarea mea era despre cum sa aranjex textul in html si css, nu era neaparat despre play. E intr-adevar un pic legat pentru ca de fapt userul trebuie sa dea click pe link ca sa se faca play-ul si deci sa se auda. Si de aia incercam sa maximizez link-ul sa fie cat mai inalt si de aia nu reusesc sa centrez textul html-ului. Dar daca ai o alta solutie, alta decat cu input sau alta decat cu soundmanager sunt ochi si urechi si iti multumesc anticipat. Eu am vrut sa inlocuiesc soundmanager2 incercat cu tagul html5 <audio>, caci asta nu mai are nevoie de nici un javascript dar am dat peste o alta problema la care nu i-am dat de cap inca: https://forum.softpe...-si-nu-pe-alta/ Asta e link-ul de la soundmanager2 https://www.schillma...-player-button/ Multumesc frumos Edited by leny29, 26 April 2023 - 22:12. |
#8
Posted 27 April 2023 - 11:56
![](https://forum.softpedia.com//public/style_images/classic/post_offline.png)
O noua varianta daca te ajuta cu buton de play si audio, dar si un pic de JS pentru a da play:
Aici ai si varianta pe CodePen: https://codepen.io/G1q/pen/WNaOQVv HTML - daca nu pui atributul controls in tag-ul audio, atunci nu se va afisa player-ul HTML, dar el va functiona normal <div class="wrapper"> <div class="option"> <audio class="option__audio" id="audio1" src="./audio/1.mp3"></audio> <button class="option__btn">Option 1</button> </div> <div class="option"> <audio class="option__audio" id="audio2" src="./audio/2.mp3"></audio> <button class="option__btn">Option 2</button> </div> <div class="option"> <audio class="option__audio" id="audio3" src="./audio/3.mp3"></audio> <button class="option__btn">Option 3</button> </div> <div class="option"> <audio class="option__audio" id="audio4" src="./audio/4.mp3"></audio> <button class="option__btn">Option 4</button> </div> </div> CSS .wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 500px; padding: 1rem; border: 1px solid #dedede; } .option { border: 1px solid #ededed; display: grid; place-items: center; } .option__btn { display: block; width: 100%; height: 100%; border: none; background-color: forestgreen; color: white; cursor: pointer; } JS - la click pe buton, va porni audio al elementului din acelasi parinte div.option - la click pe un buton, am pus pointer-events: none pe toate butoanele, pentru a nu se mai putea selecta alta varianta const optionBtns = document.querySelectorAll('.option__btn') optionBtns.forEach((optionBtn) => { optionBtn.addEventListener('click', () => play(optionBtn.previousElementSibling.id) ) }) function play(id) { // Get audio element const audio = document.getElementById(id) // Disable all buttons events optionBtns.forEach((btn) => (btn.style.pointerEvents = 'none')) // Start audio audio.play() // Callback function after audio ended (if necessary) audio.addEventListener('ended', () => { console.log('Audio finished') }) } |
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users