Changes for page Survey #1 on the use of HBP Tools
Last modified by marissadiazpier on 2023/09/04 17:22
From version 7.1
edited by marissadiazpier
on 2023/06/25 18:05
on 2023/06/25 18:05
Change comment:
There is no comment for this version
To version 4.1
edited by marissadiazpier
on 2023/06/25 17:49
on 2023/06/25 17:49
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -2,49 +2,88 @@ 2 2 <!DOCTYPE html> 3 3 <html> 4 4 <head> 5 - <title>Encuesta</title> 6 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 5 + <title>Encuesta</title> 6 + <script src="https://api.onlyoffice.com/editors/callback.js"></script> 7 + <style> 8 + /* Estilos CSS para la encuesta */ 9 + .container { 10 + width: 400px; 11 + margin: 50px auto; 12 + } 13 + 14 + h1 { 15 + text-align: center; 16 + } 17 + 18 + form { 19 + margin-top: 20px; 20 + } 21 + 22 + label { 23 + display: block; 24 + margin-bottom: 10px; 25 + font-weight: bold; 26 + } 27 + 28 + input[type="radio"] { 29 + margin-right: 5px; 30 + } 31 + 32 + input[type="submit"] { 33 + margin-top: 10px; 34 + } 35 + </style> 7 7 </head> 8 8 <body> 9 - <h1>Encuesta</h1> 38 + <div class="container"> 39 + <h1>Encuesta</h1> 40 + <form id="survey-form"> 41 + <label> 42 + <input type="radio" name="option" value="option1"> Opción 1 43 + </label> 44 + <label> 45 + <input type="radio" name="option" value="option2"> Opción 2 46 + </label> 47 + <label> 48 + <input type="radio" name="option" value="option3"> Opción 3 49 + </label> 50 + <input type="submit" value="Enviar"> 51 + </form> 52 + </div> 10 10 11 - <!-- Formulario de la encuesta --> 12 - <form id="survey-form"> 13 - <label> 14 - <input type="radio" name="option" value="option1"> Opción 1 15 - </label> 16 - <label> 17 - <input type="radio" name="option" value="option2"> Opción 2 18 - </label> 19 - <label> 20 - <input type="radio" name="option" value="option3"> Opción 3 21 - </label> 22 - <input type="submit" value="Enviar"> 23 - </form> 54 + <script> 55 + function handleDocumentSaved(response) { 56 + console.log('Documento guardado con éxito:', response); 57 + } 24 24 25 - <script> 26 - document.getElementById('survey-form').addEventListener('submit', function(event) { 27 - event.preventDefault(); 59 + function saveResultsToOnlyOffice(results) { 60 + window.onEditorsReady = function() { 61 + window.Asc.documentService.upload( 62 + { 63 + url: 'https://drive.ebrains.eu/smart-link/58102a22-49fc-426b-ae8c-daa107489e58/', 64 + file: results, 65 + callbackUrl: 'https://drive.ebrains.eu/smart-link/58102a22-49fc-426b-ae8c-daa107489e58/', 66 + token: '58102a22-49fc-426b-ae8c-daa107489e58', 67 + success: handleDocumentSaved, 68 + error: function(response) { 69 + console.log('Error al guardar el documento:', response); 70 + } 71 + } 72 + ); 73 + }; 74 + } 28 28 29 - var selectedOption = document.querySelector('input[name="option"]:checked').value;30 - ar results = "Has seleccionado: " + selectedOption;76 + document.getElementById('survey-form').addEventListener('submit', function(event) { 77 + event.preventDefault(); 31 31 32 - // Realizar una solicitud AJAX al servidor para guardar los datos en el archivo en la nube 33 - $.ajax({ 34 - url: 'https://drive.ebrains.eu/smart-link/2052546c-45e8-4d51-847a-fa421a62e57b/', // Reemplaza con la ruta y nombre de tu archivo en la nube 35 - type: 'POST', 36 - data: results, 37 - success: function(response) { 38 - alert('Datos guardados exitosamente en el archivo en la nube.'); 39 - }, 40 - error: function(xhr, status, error) { 41 - console.error(error); 42 - alert('Error al guardar los datos en el archivo en la nube.'); 43 - } 44 - }); 45 - }); 46 - </script> 79 + var selectedOption = document.querySelector('input[name="option"]:checked').value; 80 + var results = "Has seleccionado: " + selectedOption; 81 + 82 + saveResultsToOnlyOffice(results); 83 + 84 + Puedes hacer más acciones aquí, como mostrar un mensaje de agradecimiento o redireccionar al usuario a otra página 85 + }); 86 + </script> 47 47 </body> 48 48 </html> 49 - 50 50 {{/html}}