API tools faq
paste
JUNIORCEDE1

Untitled

JUNIORCEDE1
Jun 17th, 2021
808
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 17.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  8.  
  9.     <!-- Bootstrap CSS -->
  10.     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
  11.         integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
  12.     <link rel="stylesheet" href="{{ URL::asset('styles.css') }}" />
  13.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  14.     <title></title>
  15. </head>
  16.  
  17. <body>
  18.     <input type="hidden" name="_token" value="{{csrf_token()}}">
  19.     <input type="hidden" name="_url" value="{{route('pregunta.getData')}}">
  20.     <input type="hidden" name="_url2" value="{{route('score.save')}}">
  21.     <div style="display: flex;  flex-wrap: wrap;">
  22.         <div style="float: center; flex:11">
  23.            
  24.         </div>
  25.         <div style="margin:25px; float: right; flex:1" >
  26.             <a href="/"><img id="logo-pequeno" class="img-fluid float-right" src="{{ asset('imagenes/logofut.svg') }}"></a>
  27.         </div>  
  28.     </div>
  29.     @php
  30.         $letras = ["A","B","C","D","E"];
  31.     @endphp
  32.     <div class="container" style="color: #fff; padding-left: 20px;">
  33.         <h6 class="text-center" id="contentTime">
  34.             Tiempo: 25
  35.         </h6>
  36.     </div>
  37.     @foreach ($questions as $row => $pregunta)
  38.     <div class="container" id="content-question-{{$row}}" style="color: #fff; padding-left: 20px; padding-top: 50px; padding-bottom: 140px; {{($row+1) > 1 ? 'display:none' : 'display:block'}}">
  39.         <h1 id="pregunta" class="text-center">
  40.             {{$row+1}}. {{$pregunta->question}}
  41.         </h1>
  42.         <div class="row content-questions" style="margin-top: 5rem;" id="question-{{$row}}">
  43.             <!-- Para 2 líneas
  44.             <div class="col-sm-8 col-md-6 col-lg-5 mx-auto opciones" letra="A" style="display: flex; margin-bottom: 140px; position: relative;">
  45.                     <div class="opcion-default opcion">Lorem ipsum dolor, sit amet consectetur adipisicing gdfgdfhfghgfjgfj</div>
  46.                     <div class="letra-default letra">
  47.                     <span class="content-letra"></span>
  48.                 </div>
  49.             </div>
  50.             -->
  51.             @php
  52.                 $options = $pregunta->options;
  53.                 shuffle($options);
  54.             @endphp
  55.             @foreach ($options as $cont => $item)
  56.                 <div class="col-sm-8 col-md-6 col-lg-5 mx-auto opciones" actual="{{$row}}" letra="{{$letras[$cont]}}" style="display: flex; margin-bottom: 80px; position: relative;">
  57.                     <div class="opcion-default opcion text-center">{{$item}}</div>
  58.                     <div class="letra-default letra">
  59.                         <span class="content-letra"></span>
  60.                     </div>
  61.                 </div>
  62.             @endforeach
  63.             <!--
  64.                 <div class="col-sm-8 col-md-6 col-lg-5 mx-auto opciones" letra="D"  style="display: flex; margin-bottom: 80px; position: relative">
  65.                     <div class="opcion-default opcion">Piso 3 junto a Cinext</div>
  66.                     <div class="letra-default letra">
  67.                         <span class="content-letra"></span>
  68.                     </div>
  69.                 </div>
  70.             -->
  71.         </div>
  72.         <div>
  73.             <div id="enviar" class="enviar mx-auto" actual="{{$row}}" {{ $row+1 < count($questions) ? 'next='.($row+1).'': 'next=final'}} idQuestion="{{$pregunta->id}}">
  74.                 <button type="button" class="mx-auto btn btn-primary"
  75.                     id="boton-confirmar">Confirmar
  76.                 </button>
  77.             </div>
  78.         </div>
  79.     </div>
  80.     @endforeach
  81.  
  82.     <div class="container col-auto" id="content-question-final" style="color: #fff; padding-top: 50px; padding-bottom: 100px; display:none">
  83.        
  84.         <h1 id="titulo-formulario" class="text-center">TU PUNTUACIÓN</h1>
  85.         <div id="puntuacion" class="mx-auto" style="padding-top: 50px; padding-bottom: 170px;">
  86.             <div class="mx-auto btn btn-primary" id="puntuacion-1"></div>
  87.             <div class="mx-auto btn btn-primary" id="puntuacion-2"></div>
  88.         </div>
  89.     </div>
  90.    
  91. </body>
  92. <footer>
  93. </footer>
  94. </html>
  95.  
  96. <script>
  97.     porpregunta = 20;
  98.     puntaje = 0;
  99.     TiempoTemporizador = 35
  100.     Temporizador = TiempoTemporizador
  101.     document.querySelector('#contentTime').innerHTML = 'Tiempo: '+Temporizador
  102.     tempo= null;
  103.     actualQuestionDisplay=0
  104.     pausarTemporizado = false;
  105.     final = false;
  106.     audioCorrecto = new Audio("{{ asset('/music/Correcto.mp3') }}");
  107.     audioIncorrecto = new Audio("{{ asset('/music/Incorrecto.mp3') }}");
  108.     opciones = ['default','seleccionada','correcta','incorrecta']
  109.     imagenes = ['seleccionado.svg','play.svg','incorrecto.svg']
  110.     listaOpciones = document.querySelectorAll('.opciones');
  111.     listaOpciones.forEach(element => {
  112.         content = element.querySelector('.content-letra');
  113.         if (content != null) {
  114.             content.innerHTML = element.getAttribute('letra')
  115.         }
  116.         element.onclick = seleccionarOpciones;
  117.     });
  118.  
  119.     function seleccionarOpciones(){
  120.         let id = this.getAttribute('actual')
  121.         if(id){
  122.             let question = document.querySelector('#question-'+id)
  123.             if(question){
  124.                 listaOpciones = question.querySelectorAll('.opciones');
  125.                 listaOpciones.forEach(element => {
  126.                     let opcion = element.querySelector('.opcion');
  127.                     let letra = element.querySelector('.letra');
  128.                     opcion.className = 'opcion-default opcion text-center';
  129.                     letra.className = 'letra-default letra';
  130.                     content = element.querySelector('.content-letra');
  131.                     if (content != null) {
  132.                         content.innerHTML = element.getAttribute('letra')
  133.                     }
  134.                 });
  135.                
  136.                 let opcionSelect = this.querySelector('.opcion');
  137.                 let letraSelect = this.querySelector('.letra');
  138.                
  139.                 opcionSelect.className = `opcion-${opciones[1]} opcion text-center`;
  140.                 letraSelect.className = `letra-${opciones[1]} letra`;
  141.                 let contentLetra = this.querySelector('.content-letra');
  142.                 if (contentLetra != null) {
  143.                     contentLetra.innerHTML = `<img src="{{ asset('iconos/${imagenes[0]}') }}" alt="" width="15px">`
  144.                 }
  145.             }
  146.         }
  147.     }
  148.  
  149.     let botones = document.querySelectorAll(".enviar");
  150.     botones.forEach(element => element.onclick = verificarRespuesta )
  151.     function verificarRespuesta(){
  152.         let id = this.getAttribute('actual')
  153.         if(id){
  154.             let question = document.querySelector('#question-'+id)
  155.             if(question){
  156.                 let opcion = question.querySelector('.opcion-seleccionada');
  157.                 if(opcion){
  158.                     var ajax = new XMLHttpRequest();
  159.                     let answer = opcion.innerHTML.trim()
  160.                     let data = new FormData();
  161.                     ajax.open('POST', document.querySelector("input[name='_url']").value,true);
  162.                     data.append('id_question',this.getAttribute('idQuestion'));
  163.                     ajax.setRequestHeader('X-CSRF-TOKEN', document.querySelector("input[name='_token']").value)
  164.                     ajax.send(data);
  165.                     pausarTemporizado = true;
  166.                     ajax.onload = () => {
  167.                         if(ajax.responseText){
  168.                             let response = JSON.parse(ajax.responseText)
  169.                             if(response){
  170.                                 if(answer === response.data.answer.trim()){
  171.                                     audioCorrecto.play()
  172.                                     let padre = opcion.parentNode;
  173.                                     let opcionSelect = padre.querySelector('.opcion');
  174.                                     let letraSelect = padre.querySelector('.letra');
  175.                                     opcionSelect.className = `opcion-${opciones[2]} opcion text-center`;
  176.                                     letraSelect.className = `letra-${opciones[2]} letra`;
  177.                                     let contentLetra = padre.querySelector('.content-letra');
  178.                                     if (contentLetra != null) {
  179.                                         contentLetra.innerHTML = `<img src="{{ asset('iconos/${imagenes[1]}') }}" alt="" width="15px">`
  180.                                     }
  181.                                     puntaje += porpregunta;
  182.                                 }
  183.                                 else{
  184.                                     audioIncorrecto.play()
  185.                                     let padre = opcion.parentNode;
  186.                                     let opcionSelect = padre.querySelector('.opcion');
  187.                                     let letraSelect = padre.querySelector('.letra');
  188.                                     opcionSelect.className = `opcion-${opciones[3]} opcion text-center`;
  189.                                     letraSelect.className = `letra-${opciones[3]} letra`;
  190.                                     let contentLetra = padre.querySelector('.content-letra');
  191.                                     if (contentLetra != null) {
  192.                                         contentLetra.innerHTML = `<img src="{{ asset('iconos/${imagenes[2]}') }}" alt="" width="15px">`
  193.                                     }
  194.                                     listaOpciones = question.querySelectorAll('.opciones');
  195.                                     listaOpciones.forEach(element => {
  196.                                         let opcionsearch = element.querySelector('.opcion');
  197.                                         let letrasearch = element.querySelector('.letra');
  198.                                         if(opcionsearch.innerHTML.trim() === response.data.answer.trim() ){
  199.                                             opcionsearch.className = `opcion-${opciones[2]} opcion text-center`;
  200.                                             letrasearch.className = `letra-${opciones[2]} letra`;
  201.                                             content = element.querySelector('.content-letra');
  202.                                             if (content != null) {
  203.                                                 content.innerHTML = `<img src="{{ asset('iconos/${imagenes[1]}') }}" alt="" width="15px">`
  204.                                             }
  205.                                         }
  206.                                     });
  207.                                 }
  208.                                 question.querySelectorAll('.opciones').forEach(element => element.onclick = removeClick)
  209.                                 this.onclick = removeClick
  210.                                 setTimeout(nextQuestion, 1500,this);
  211.                             }
  212.                         }
  213.                     }
  214.                 }
  215.             }
  216.         }
  217.     }
  218.  
  219.     function removeClick(){ return false;}
  220.  
  221.     function nextQuestion(boton){
  222.         let actual = boton.getAttribute('actual')
  223.         let next = boton.getAttribute('next')
  224.         let actualQuestion = document.querySelector('#content-question-'+actual)
  225.         let nextQuestion = document.querySelector('#content-question-'+next)
  226.         if(next === 'final'){
  227.             saveScore();
  228.             final = true;
  229.             Temporizador = 0;
  230.             document.querySelector('#contentTime').innerHTML = ''
  231.         }
  232.         fadeOut(actualQuestion,nextQuestion,next)  
  233.         Temporizador = TiempoTemporizador
  234.         document.querySelector('#puntuacion-2').innerHTML=puntaje
  235.         audioCorrecto.pause();
  236.         audioCorrecto.currentTime = 0;
  237.         audioIncorrecto.pause();
  238.         audioIncorrecto.currentTime = 0;
  239.     }
  240.  
  241.  
  242.     function fadeOut(thisObject,nextObject,next) {
  243.     if (thisObject){
  244.         var op = 1;  // initial opacity
  245.         var timer = setInterval(function () {
  246.             if (op <= 0.1){
  247.                 clearInterval(timer);
  248.                 thisObject.style.display='none'
  249.                 if (nextObject){
  250.                     fadeIn(nextObject,next);
  251.                 }
  252.             }
  253.             thisObject.style.opacity = op;
  254.             thisObject.style.filter = 'alpha(opacity=' + op * 100 + ")";
  255.             op -= op * 0.1;
  256.         }, 50);
  257.     }else{console.log('nohayobjeto');}
  258.    
  259. }
  260.  
  261. function fadeIn(element,next) {
  262.     if(element){
  263.         var op = 0.1;  // initial opacity
  264.         element.style.opacity = op;
  265.         element.style.display = 'block';
  266.         var timer = setInterval(function () {
  267.             if (op >= 1){
  268.                 clearInterval(timer);
  269.             }
  270.             element.style.opacity = op;
  271.             element.style.filter = 'alpha(opacity=' + op * 100 + ")";
  272.             op += op * 0.1;
  273.         }, 10);
  274.         if(pausarTemporizado && next!='final'){
  275.             pausarTemporizado = false;
  276.         }
  277.         actualQuestionDisplay=next
  278.     }else{console.log('nohayobjeto');}
  279. }
  280.  
  281. function saveScore(){
  282.     /*
  283.     var ajax = new XMLHttpRequest();
  284.     let data = new FormData();
  285.     ajax.open('POST', document.querySelector("input[name='_url2']").value,true);
  286.     data.append('score',puntaje);
  287.     ajax.setRequestHeader('X-CSRF-TOKEN', document.querySelector("input[name='_token']").value)
  288.     ajax.send(data);
  289.     ajax.onload = () => {  
  290.         if(ajax.responseText === 'success'){
  291.             setTimeout(function(){ location.href='/' }, 5000);
  292.         }
  293.     }*/
  294. }
  295.  
  296. setInterval( ()=>{
  297.         if(!pausarTemporizado && !final){
  298.             document.querySelector('#contentTime').innerHTML = 'Tiempo: '+Temporizador
  299.             Temporizador--
  300.             if(Temporizador == 0){
  301.                 pausarTemporizado = true;
  302.                 let question = document.querySelector('#content-question-'+actualQuestionDisplay)
  303.                 let button = question.querySelector('.enviar')
  304.                 let opcion = question.querySelector('.opcion-seleccionada');
  305.                 if(opcion){
  306.                     button.click();
  307.                 } else{
  308.                     audioIncorrecto.play()
  309.                     let answer = '';
  310.                     var ajax = new XMLHttpRequest();
  311.                     let data = new FormData();
  312.                     ajax.open('POST', document.querySelector("input[name='_url']").value,true);
  313.                     data.append('id_question',button.getAttribute('idQuestion'));
  314.                     ajax.setRequestHeader('X-CSRF-TOKEN', document.querySelector("input[name='_token']").value)
  315.                     ajax.send(data);
  316.                     pausarTemporizado = true;
  317.                     ajax.onload = () => {
  318.                         if(ajax.responseText){
  319.                             let response = JSON.parse(ajax.responseText)
  320.                             if(response){
  321.                                 listaOpciones = question.querySelectorAll('.opciones');
  322.                                 listaOpciones.forEach(element => {
  323.                                     let opcionsearch = element.querySelector('.opcion');
  324.                                     let letrasearch = element.querySelector('.letra');
  325.                                     if(opcionsearch.innerHTML.trim() === response.data.answer.trim() ){
  326.                                         opcionsearch.className = `opcion-${opciones[2]} opcion text-center`;
  327.                                         letrasearch.className = `letra-${opciones[2]} letra`;
  328.                                         content = element.querySelector('.content-letra');
  329.                                         if (content != null) {
  330.                                             content.innerHTML = `<img src="{{ asset('iconos/${imagenes[1]}') }}" alt="" width="15px">`
  331.                                         }
  332.                                     }
  333.                                     else{
  334.                                         opcionsearch.className = `opcion-${opciones[3]} opcion text-center`;
  335.                                         letrasearch.className = `letra-${opciones[3]} letra`;
  336.                                         content = element.querySelector('.content-letra');
  337.                                         if (content != null) {
  338.                                             content.innerHTML = `<img src="{{ asset('iconos/${imagenes[2]}') }}" alt="" width="15px">`
  339.                                         }
  340.                                     }
  341.                                 });
  342.                                 question.querySelectorAll('.opciones').forEach(element => element.onclick = removeClick)
  343.                                 button.onclick = removeClick
  344.                                 setTimeout(nextQuestion, 1500,button);
  345.                             }
  346.                         }
  347.                     }
  348.                 }
  349.             }
  350.         }
  351.     }, 1000)
  352.  
  353. </script>
  354. <!-- Optional JavaScript; choose one of the two! -->
  355.  
  356. <!-- Option 1: Bootstrap Bundle with Popper -->
  357. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  358.     integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
  359.     crossorigin="anonymous"></script>
  360.  
  361. <!-- Option 2: Separate Popper and Bootstrap JS -->
  362. <!--
  363. <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
  364. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
  365. -->
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!