| <!DOCTYPE html> |
| <html lang="ca"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <!-- Load Jquery --> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
| |
| <style> |
| body { |
| background-color: lightgray; |
| } |
| |
| #outter-container { |
| margin: 40px 20px; |
| } |
| |
| #inner-container { |
| width: 80%; |
| background-color: white; |
| padding: 50px; |
| margin: 0 auto; |
| } |
| |
| .label, .final { |
| font-size: 36px; |
| } |
| |
| .final { |
| color: gray; |
| } |
| |
| section { |
| padding: 10px 0; |
| } |
| |
| .container { |
| /* flexbox setup */ |
| display: -webkit-flex; |
| -webkit-flex-direction: row; |
| |
| display: flex; |
| flex-direction: row; |
| flex-wrap: wrap; |
| |
| justify-content: center; |
| align-items : center; |
| |
| height: 75vh; |
| overflow-y: auto; |
| } |
| |
| .button { |
| border: solid 2px #26bdff; |
| color: black; |
| font-size: 5vw; |
| |
| flex: 1 0 20%; |
| margin: 20px; |
| padding: 40px 20px; |
| |
| vertical-align: middle; |
| text-align: center; |
| } |
| |
| .selected { |
| background-color: #c3ddff; |
| } |
| |
| #subject-container .button { |
| text-align: left; |
| flex: 1 0 20%; |
| height: auto; |
| } |
| |
| .current-subject .title { |
| font-size: 18px; |
| } |
| .current-subject .subtitle { |
| font-size: 14px; |
| } |
| |
| #send-button { |
| font-size: 48px; |
| width: 80%; |
| margin: 0 auto; |
| display: block; |
| margin-top: 50px; |
| padding: 50px 30px; |
| background-color: #26bdff; |
| color: white; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="outter-container"> |
| <div id="inner-container"> |
| <section id="subject-section"> |
| <div class="showhide"> |
| <span id="subject-label" class="label">Assignatura (Aula):</span> |
| <span id="subject-final" class="final"></span> |
| </div> |
| <div id="subject-container" class="container"> |
| <div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)"> |
| <div class="title">Àlgebra Lineal</div> |
| <div class="subtitle">Aula 001</div> |
| <div class="subtitle">9.00 - 10.00</div> |
| </div> |
| <div class="current-subject button" id="subject-2"> |
| <div class="title">Àlgebra Lineal</div> |
| <div class="subtitle">Aula 001</div> |
| <div class="subtitle">9.00 - 10.00</div> |
| </div> |
| <div class="current-subject button" id="subject-3"> |
| <div class="title">Àlgebra Lineal</div> |
| <div class="subtitle">Aula 001</div> |
| <div class="subtitle">9.00 - 10.00</div> |
| </div> |
| <div class="current-subject button" id="subject-4"> |
| <div class="title">Àlgebra Lineal</div> |
| <div class="subtitle">Aula 001</div> |
| <div class="subtitle">9.00 - 10.00</div> |
| </div> |
| </div> |
| </section> |
| <section id="number-section"> |
| <div class="showhide"> |
| <span id="number-label" class="label">Número de seient:</span> |
| <span id="number-final" class="final"></span> |
| </div> |
| <div id="number-container" class="container"> |
| <div class="number button" id="number-1">1</div> |
| <div class="number button" id="number-2">2</div> |
| <div class="number button" id="number-3">3</div> |
| <div class="number button" id="number-4">4</div> |
| <div class="number button" id="number-5">5</div> |
| <div class="number button" id="number-6">6</div> |
| <div class="number button" id="number-7">7</div> |
| <div class="number button" id="number-8">8</div> |
| <div class="number button" id="number-9">9</div> |
| <div class="number button" id="number-10">10</div> |
| </div> |
| </section> |
| <section id="letter-section"> |
| <div class="showhide"> |
| <span id="letter-label" class="label">Lletra de seient:</span> |
| <span id="letter-final" class="final"></span> |
| </div> |
| <div id="letter-container" class="container"> |
| <div class="letter button" id="letter-A">A</div> |
| <div class="letter button" id="letter-B">B</div> |
| <div class="letter button" id="letter-C">C</div> |
| <div class="letter button" id="letter-D">D</div> |
| <div class="letter button" id="letter-E">E</div> |
| <div class="letter button" id="letter-F">F</div> |
| <div class="letter button" id="letter-G">G</div> |
| <div class="letter button" id="letter-H">H</div> |
| <div class="letter button" id="letter-I">I</div> |
| <div class="letter button" id="letter-J">J</div> |
| <div class="letter button" id="letter-K">K</div> |
| <div class="letter button" id="letter-L">L</div> |
| </div> |
| </section> |
| <section id="date-section"> |
| <div class="showhide"> |
| <span id="date-label" class="label">Data:</span> |
| <span id="date-final" class="final">16/01/2020</span> |
| </div> |
| </section> |
| <section id="hour-section"> |
| <div class="showhide"> |
| <span id="hour-label" class="label">Hora:</span> |
| <span id="hour-final" class="final">09.00 - 10.00</span> |
| </div> |
| </section> |
| <button id="send-button"> |
| <span>Anar al formulari</span> |
| </button> |
| </div> |
| </div> |
| |
| <script> |
| var subjects_texts = { |
| "subject-1": "Àlgebra", |
| "subject-2": "Càlcul I", |
| "subject-3": "Topologia", |
| "subject-4": "Informàtica" |
| }; |
| |
| var elements = document.getElementsByClassName("button"); |
| Array.from(elements).forEach(function(element) { |
| element.addEventListener('click', clickButton); |
| element.parent = element.parentNode.id; |
| console.log(element.id); |
| }); |
| |
| function clickButton(element) { |
| var parent = element.currentTarget.parent; |
| var id = element.currentTarget.id; |
| var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]); |
| |
| console.log(parent); |
| console.log(id); |
| |
| if (parent == "subject-container") { |
| // Canvi de background del button |
| $(".current-subject").css("background-color", "white"); |
| $("#" + id).css("background-color", "#c3ddff"); |
| // Canvi del text al final |
| $("#" + parent).parent().find(".final").html(final_text); |
| // Canvi JSON |
| // TODO |
| // Anchor següent pregunta |
| document.getElementById("number-section").scrollIntoView(); |
| } else if (parent == "number-container") { |
| // Canvi de background del button |
| $(".number").css("background-color", "white"); |
| $("#" + id).css("background-color", "#c3ddff"); |
| // Canvi del text al final |
| $("#" + parent).parent().find(".final").html(final_text); |
| // Canvi JSON |
| // TODO |
| // Anchor següent pregunta |
| document.getElementById("letter-section").scrollIntoView(); |
| } else if (parent == "letter-container") { |
| // Canvi de background del button |
| $(".letter").css("background-color", "white"); |
| $("#" + id).css("background-color", "#c3ddff"); |
| // Canvi del text al final |
| $("#" + parent).parent().find(".final").html(final_text); |
| // Canvi JSON |
| // TODO |
| // Anchor següent pregunta |
| document.getElementById("send-button").scrollIntoView(); |
| } |
| } |
| </script> |
| </body> |
| </html> |