ajoy123rocks

Any help will be much appreciated

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="selected">CHOOSE ARTICLE</span><span class="caret"></span></a> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">All</a> <a class="dropdown-item" href="#">Art. 1: Definitions</a> <a class="dropdown-item" href="#">Art. 2: Playing Court</a> <a class="dropdown-item" href="#">Art. 3: Equipment</a> <a class="dropdown-item" href="#">Art. 4: Teams</a> <a class="dropdown-item" href="#">Art. 5: Players: Injury and assistance</a> <a class="dropdown-item" href="#">Art. 6: Captain: Duties and powers</a> <a class="dropdown-item" href="#">Art. 7: Head coach and first assistant coach: Duties and powers</a> <a class="dropdown-item" href="#">Art. 8: Playing time, tied score and overtime</a> <a class="dropdown-item" href="#">Art. 9: Beginning and end of a quarter, overtiem or the game</a> <a class="dropdown-item" href="#">Art. 10: Status of the ball</a> <a class="dropdown-item" href="#">Art. 11: Location of a player and a referee</a> <a class="dropdown-item" href="#">Art. 12: Jump ball and alternating possession</a> <a class="dropdown-item" href="#">Art. 13: How the ball is played</a> <a class="dropdown-item" href="#">Art. 14: Control of the ball</a> <a class="dropdown-item" href="#">Art. 15: Player in the act of shooting</a> <a class="dropdown-item" href="#">Art. 16: Goal: When made and its value</a> <a class="dropdown-item" href="#">Art. 17: Throw-in</a> <a class="dropdown-item" href="#">Art. 18: Time-out</a> <a class="dropdown-item" href="#">Art. 19: Substitution</a> <a class="dropdown-item" href="#">Art. 20: Game lost by forfeit</a> <a class="dropdown-item" href="#">Art. 21: Game lost by default</a> <a class="dropdown-item" href="#">Art. 22: Violations</a> <a class="dropdown-item" href="#">Art. 23: Player out-of-bounds and ball out-of-bounds</a> <a class="dropdown-item" href="#">Art. 24: Dribbling</a> <a class="dropdown-item" href="#">Art. 25: Travelling</a> <a class="dropdown-item" href="#">Art. 26: 3 seconds</a> <a class="dropdown-item" href="#">Art. 27: Closely guarded player</a> <a class="dropdown-item" href="#">Art. 28: 8 seconds</a> <a class="dropdown-item" href="#">Art. 29: 24 seconds</a> <a class="dropdown-item" href="#">Art. 30: Ball returned to the backcourt</a> <a class="dropdown-item" href="#">Art. 31: Goaltending and Interference</a> <a class="dropdown-item" href="#">Art. 32: Fouls</a> <a class="dropdown-item" href="#">Art. 33: Contact: General principles</a> <a class="dropdown-item" href="#">Art. 34: Personal foul</a> <a class="dropdown-item" href="#">Art. 35: Double foul</a> <a class="dropdown-item" href="#">Art. 36: Technical foul</a> <a class="dropdown-item" href="#">Art. 37: Unsportsmanlike foul</a> <a class="dropdown-item" href="#">Art. 38: Disqualifying foul</a> <a class="dropdown-item" href="#">Art. 39: Fighting</a> <a class="dropdown-item" href="#">Art. 40: 5 fouls by a player</a> <a class="dropdown-item" href="#">Art. 41: Team fouls: Penalty</a> <a class="dropdown-item" href="#">Art. 42: Special situations</a> <a class="dropdown-item" href="#">Art. 43: Free throws</a> <a class="dropdown-item" href="#">Art. 44: Correctable errors</a> <a class="dropdown-item" href="#">Art. 45: Referees,table officials and commissioner</a> <a class="dropdown-item" href="#">Art. 46: Crew chief: Duties and powers</a> <a class="dropdown-item" href="#">Art. 47: Referees: Duties and powers</a> <a class="dropdown-item" href="#">Art. 48: Scorer and assistant scorer: Duties</a> <a class="dropdown-item" href="#">Art. 49: Timer: Duties</a> <a class="dropdown-item" href="#">Art. 50: Shot clock operator: Duties</a> <a class="dropdown-item" href="#">B: The Scoresheet</a> <a class="dropdown-item" href="#">C: Protest Procedure</a> <a class="dropdown-item" href="#">D: Classification of teams</a> <a class="dropdown-item" href="#">E: Media Time-outs</a> <a class="dropdown-item" href="#">F: Instant Replay System</a> </div> </div> <h5 class="roundborder1" style="text-align: center;font-size:25px"><b>RULES QUIZ</b></h5> <div class="panel"> <br> <div class="question-container" id="question"> Question goes here. </div> <br><br> <div class="option-container"> <button class="option" onclick="" id="op1" >YES</button> <button class="option" onclick="" id="op2" >NO</button> </div> <br><br> <div class="result" id="key"> </div> <br><br> <div class="navigation"> <button class="prev"><b>PREV</b></button> <button class="next" ><b>NEXT</b></button> </div> </div> <script> const Questions = [{ id: 0, q: "Basketball is played by two teams of 12 players each.", a: [{ text: "YES", isCorrect: false }, { text: "NO", isCorrect: true } ], k: "Basketball is played by two teams of 5 players each.(Art. 1 (1.1))" }, { id: 1, q: "The aim of each team is to score in the opponent’s basket.", a: [{ text: "YES", isCorrect: true,}, { text: "NO", isCorrect: false } ], k: "The aim of each team is to score in the opponent’s basket and to prevent the other team from scoring.(Art. 1 (1.1))" }, { id: 2, q: "The basket that is attacked by the team is its own basket.", a: [{ text: "YES", isCorrect: false }, { text: "NO", isCorrect: true } ], k: "The basket that is attacked by the team is the opponent's basket basket.(Art. 1 (1.2))" } ] // Set start var start = true; // Iterate function iterate(id) { // Getting the result display section var result = document.getElementsByClassName("result"); result[0].innerText = ""; // Getting the question const question = document.getElementById("question"); // Setting the question text question.innerText = Questions[id].q; // Getting the options const op1 = document.getElementById('op1'); const op2 = document.getElementById('op2'); op2.style.backgroundColor = "var(--primary-color)"; op2.style.color = "black"; op1.style.backgroundColor = "var(--primary-color)"; op1.style.color = "black"; // Providing option text op1.innerText = Questions[id].a[0].text; op2.innerText = Questions[id].a[1].text; // Providing the true or false value to the options op1.value = Questions[id].a[0].isCorrect; op2.value = Questions[id].a[1].isCorrect; //key.innerText = Questions[id].k; var selected = ""; // Show selection for op1 op1.addEventListener("click", () => { op1.style.backgroundColor = "black"; op1.style.color = "var(--primary-color)"; op2.style.backgroundColor = "var(--primary-color)"; op2.style.color = "black"; selected = op1.value; key.innerText = Questions[id].k; if (selected == "true") { result[0].innerText = "CORRECT \n" + key.innerText ; result[0].style.color = "#00FF00"; } else { result[0].innerText = "WRONG \n" + key.innerText ; result[0].style.color = "#FF0000"; } }) // Show selection for op2 op2.addEventListener("click", () => { op1.style.backgroundColor = "var(--primary-color)"; op1.style.color = "black"; op2.style.backgroundColor = "black"; op2.style.color = "var(--primary-color)"; selected = op2.value; key.innerText = Questions[id].k; if (selected == "true") { result[0].innerText = "CORRECT \n" + key.innerText ; result[0].style.color = "#00FF00"; } else { result[0].innerText = "WRONG \n" + key.innerText ; result[0].style.color = "#FF0000"; } }) } if (start) { iterate("0"); } // Next button and method const next = document.getElementsByClassName('next')[0]; var id = 0; next.addEventListener("click", () => { start = false; if (id < 2) { id++; iterate(id); console.log(id); } }) const prev = document.getElementsByClassName('prev')[0]; prev.addEventListener("click", () => { start = false; if (id > 0) { id--; iterate(id); console.log(id); } }) $('.dropdown-menu a').click(function(){ $('#selected').text($(this).text()); }); </script> .question-container{ background-color: black; font-size: x-large; text-align: center; } .option-container{ display: flex; justify-content: space-evenly; background-color: black; } .result{ text-align: center; font-size: 25px; } .option{ border-color: white; font-family: tahoma; font-weight: bold; width: 10vw; height: 8vh; font-size: 20px; } .option{ border: 2px solid var(--primary-color); color: black; text-transform: uppercase; transition: all 0.5s ease-in-out; border-radius: 10px; background: var(--primary-color); } .option:hover,.option:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .navigation{ display: flex; justify-content: space-evenly; background-color:black; } .next,.prev{ border-color: white; font-family: tahoma; font-weight: bold; width: 15vw; height: 8vh; font-size: 20px; } .next,.prev{ border: 2px solid var(--primary-color); color: black; text-transform: uppercase; transition: all 0.5s ease-in-out; border-radius: 10px; background: var(--primary-color); } .next:hover,.next:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .prev:hover,.prev:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } .dropdown-menu { max-height: 280px; overflow-y: auto; } I am trying to create a quiz via html. The dropdown menu contains All and other several options. When i select "All" , all the questions must be available to the user When I select any of the options, only questions related to that topic must be available to the user. How can i achieve this? Kindly help.

I tried it. The modal opens but the pdf does not open in the modal. It opens a dialog asking me to save the file. <button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="Fiba-Assist-Coaches-Offense.pdf"> Watch&nbsp;<i class="fa fa-file-pdf-o" aria-hidden="true"></i></button>

Sir... I currently am building the webpage and have still not hosted it on any server. In this scenario how can i load the above pdf in a modal?

Ok sir...How can i workaround to get the pdf get displayed in the modal?

<button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing"> Watch&nbsp;<i class="fa fa-file-pdf-o" aria-hidden="true"></i></button> <!-- Modal --> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-dark border-dark"> <button type="button" class="close text-white" data-dismiss="modal">&times;</button> </div> <div class="modal-body bg-dark p-0"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" allowfullscreen></iframe> </div> </div> </div> </div> </div> <script> $(document).ready(function() { // Set iframe attributes when the show instance method is called $("#videoModal").on("show.bs.modal", function(event) { let button = $(event.relatedTarget); // Button that triggered the modal let url = button.data("video"); // Extract url from data-video attribute console.log(url) $(this).find("iframe").attr({ src : url, allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }); }); // Remove iframe attributes when the modal has finished being hidden from the user $("#videoModal").on("hidden.bs.modal", function() { $("#videoModal iframe").removeAttr("src allow"); }); }); </script> The link "https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing" is opening via browser but shows "Forbidden Error 403" when opened via modal

Yes.. The paragraph tag was the root cause. Changed the top and bottom margins and got it to work. Thanks

The problem still persists. Actually the real problem was something else... all the rows were not getting vertically aligned in the middle. I found this when i changed the border to dotted. td,tr { border-style: dotted; text-align: left; } .Docs{ font-size: large; color: var(--primary-color); }

Found the culprit.. Class = "Docs".. removed the margins and it worked fine. .Docs{ font-size: large; color: var(--primary-color); margin: 10px ; margin-left: 5%; margin-right: 5%; margin-top:2%; }

<tr> <td><p class="Docs"><b>INTRODUCTION TO LEVEL 1</b>&emsp;(Version 2.0, 2021)</td> <td vertical-align:middle><a href="https://drive.google.com/file/d/1FGL-JeWTK-y_mzmA_FdAYwdy-0D8xleA/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td> </tr> Tried it.. did not work.

<div id="Curriculum" class="tabcontentref"> <table style="margin-left: 2%;width:50%"> <tr> <td><p class="Docs"><b>INTRODUCTION TO LEVEL 1</b>&emsp;(Version 2.0, 2021)</td> <td><a href="https://drive.google.com/file/d/1FGL-JeWTK-y_mzmA_FdAYwdy-0D8xleA/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td> </tr> <tr> <td><p class="Docs"><b>REFEREE COURSE - LEVEL 1</b>&emsp;(Version 2.0, 2021)</td> <td><a href="https://drive.google.com/file/d/1ZcO_DmDrlFYxONgdpy8UEECfAr1I14RB/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td> </tr> <tr> <td><p class="Docs"><b>REFEREE COURSE - LEVEL 2</b>&emsp;(Version 2.0, 2021)</td> <td><a href="https://drive.google.com/file/d/1umYT1Vl6OjrixccNNOqFi9yoaXtY8k6b/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td> </tr> <tr> <td><p class="Docs"><b>REFEREE COURSE - LEVEL 3</b>&emsp;(Version 2.0, 2021)</td> <td><a href="https://drive.google.com/file/d/12-MxZwscvjYSS29czMNp3kH-rgrf5pWC/view?usp=sharing" download target="_blank"class = "buttonvid"> <i class="fa fa-download"></i>&nbsp;Download</a></p></td> </tr> </table> td,tr { border-style: none; text-align: left; } .buttonvid{ padding: 2px 10px; border-color: white; font-size:12px; font-family: tahoma; font-weight: bold; } .buttonvid{ border: 2px solid var(--primary-color); ; color: black; text-transform: uppercase; transition: all 0.5s ease-in-out; border-radius: 10px; background: var(--primary-color); ; font-weight: bold; } .buttonvid:hover,.buttonvid:focus{ background: transparent; text-decoration: none; color: white; font-weight: bold; outline: none; cursor: pointer; } The 2nd column data is not getting aligned vertically in the middle. Seems like it is vertically aligned in the top. I tried giving "vertical-align:middle" in the CSS file, but still did not get it aligned.

HTML code: <p class="Docs">A Development Program for Players and Coaches &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;&nbsp; Carlos Frade & Michael Schwarz&emsp;&emsp;&emsp;&emsp;&ensp;&nbsp; <button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" title="Credits: FIBA Europe"data-toggle="modal" data-target="#videoModal10" data-video="https://vod-progressive.akamaized.net/exp=1640630173~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2769%2F17%2F438849557%2F1916566106.mp4~hmac=a97bb09bb0d7f3fe919fe2aa1e67d116cbc4769d49fbcaf3a33ac83fa12f9ade/vimeo-prod-skyfire-std-us/01/2769/17/438849557/1916566106.mp4"> Watch&nbsp;<i class="fa fa-video-camera" aria-hidden="true"></i></button> </p> I need to access a vimeo video from website every time the user clicks the "Watch" button. The URL is a akamai token generated url and expires after exp time. I do have a login for the site (http://coaching.fibaeurope.com) where vimeo video link is located. https://vod-progressive.akamaized.net/exp=1640630173~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2769%2F17%2F438849557%2F1916566106.mp4~hmac=a97bb09bb0d7f3fe919fe2aa1e67d116cbc4769d49fbcaf3a33ac83fa12f9ade/vimeo-prod-skyfire-std-us/01/2769/17/438849557/1916566106.mp4 Is there a way get the token generated dynamically using javascript? kindly help

I need to access a vimeo video from website every time the user clicks the "Watch" button. The URL is a akamai token generated url and expires after exp time. I do have a login for the site (http://coaching.fibaeurope.com) where vimeo video link is located. https://vod-progressive.akamaized.net/exp=1640630173~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2769%2F17%2F438849557%2F1916566106.mp4~hmac=a97bb09bb0d7f3fe919fe2aa1e67d116cbc4769d49fbcaf3a33ac83fa12f9ade/vimeo-prod-skyfire-std-us/01/2769/17/438849557/1916566106.mp4 Is there a way get the token generated dynamically using javascript? kindly help

ONE ISSUE RESOLVED: I added the active class to FITNESS tab and it gets highlighted at page loading. SECOND ISSUE: On loading the page the contents of other tab are also displayed one below the other as show second pic in the original post. But once I start clicking other tabs only the contents of that tab are loaded. The issue is only when the page is loaded. Kindly please help.

.tab { float: left; border: 1px solid yellow; background-color: yellow; width: 15%; height: 100px; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 20px 10px; width: 100%; border: none; outline: none; text-align: justify; cursor: pointer; transition: 0.3s; font-size:18px; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: black; color: yellow; } /* Style the tab content */ .tabcontenta { float: left; padding: 0px 12px; border: none; width: 80%; border-left: none; height: 700px; color: yellow; } <div class="tab"> <button class="tablinks" onclick="openCity(event, 'Fitness')" id="defaultOpen"><b>FITNESS TESTS</b></button> <button class="tablinks" onclick="openCity(event, 'Mechanics')"><b>MECHANICS</b></button> <button class="tablinks" onclick="openCity(event, 'Curriculum')"><b>CURRICULUM</b></button> </div> <div id="Fitness" class="tabcontenta"> </div> <div id="Mechanics" class="tabcontenta"> </div> <div id="Curriculum" class="tabcontenta"> </div> <script> function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontenta"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> The below code for vertical tab is not working as intended. On opening the webpage, the FITNESS TESTS tab is not highlighted as the default tab and all the contents of other tabs too are also displayed below this. After clicking any tab now, the functionality is fine. The problem is when the webpage is opened for the first time.