Skip to content

Instantly share code, notes, and snippets.

@fluushx

fluushx/encuesta-de-satisfaccion-formulario.markdown

Created July 18, 2020 22:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fluushx/3603cec43c2af5823fb9121c64c2cfa5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fluushx/3603cec43c2af5823fb9121c64c2cfa5 to your computer and use it in GitHub Desktop.
Download ZIP
Encuesta de Satisfacción Formulario
Raw
encuesta-de-satisfaccion-formulario.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Suez+One&display=swap" rel="stylesheet">
<title>Homepage</title>
</head>
<body>
<header class="header header--purple">
<div class="header__logo">
<img src="https://vinculacion.unab.cl/wp-content/uploads/2018/06/fondo-transparente-logo-color-con-texto-blanco-y-3-palabras.png">
</div>
<h1 class="header__title font-display">
Analisis GAP</h1>
</header>
<div class="info">
<p class="info__text font-body">
Dominion N°1 - Política Seguridad</p> <br />
<div class="container">
<section class="row">
<div class="col-md-12">
</div>
</section>
</section>
</section>
<hr />
<!-- Servicios -->
<section class="row">
<div class="col-md-12">
<h3>Documento Política Seguridad Informática</h3>
<p></p>
</div>
</section>
<!-- PREGUNTA 1 -->
<section class="row">
<div class="col-md-6">
<p>1- Existe una Política de Seguridad Informática la cual ha sido aprobada por la Gerencia, publicada y comunicada a todos los empleados? </p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
</section>
<!-- PREGUNTA 2 -->
<section class="row">
<div class="col-md-6">
<p>2- La Politica establece el compromiso de la Gerencia y el acercamiento organizacional a la administración de seguridad informática? </p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta2a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta2b" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta2c" value="NA"> N/A
</label>
</div>
</section>
<!-- Durante la Atención -->
<section class="row">
<div class="col-md-12">
<h3>Revisión de Política Seguridad Informática</h3>
<p></p>
</div>
</section>
<!-- PREGUNTA 3 -->
<section class="row">
<div class="col-md-6">
<p>3- Si la Política de Seguridad Informática es revisada en intervalos programados, o si cambios significativos ocurren para asegurarse su continuidad, adecuación y efectividad.</p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
</section>
<!-- PREGUNTA 4 -->
<section class="row">
<div class="col-md-6">
<p>4- Si la Política de Seguridad Informática tiene un dueño, el cual tiene responsabilidad aprobada para desarrollar, revisar y evaluar la Política de Seguridad.</p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
</section>
<!-- PREGUNTA 5 -->
<section class="row">
<div class="col-md-6">
<p>5- Si existe un procedimiento definido para la revisión de la Política de Seguridad Informática y si incluye requisitos para la revisión por la Gerencia.</p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
</section>
<!-- PREGUNTA 6 -->
<section class="row">
<div class="col-md-6">
<p>6- Si se toman en cuenta los resultados de las revisiones gerenciales.</p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
</section>
<!-- PREGUNTA 7 -->
<section class="row">
<div class="col-md-6">
<p>7- Si se obtiene la aprobación de la gerencia para la Política revisada.</p>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="pregunta1a" value="SI"> Si
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntab" value="NO"> No
</label>
</div>
<div class="col-md-2">
<label class="radio">
<input type="radio" name="pregunta1" id="preguntac" value="NA"> N/A
</label>
</div>
<section class="row">
<div class="col-md-12">
<button type="button" class="btn btn-info" id="saveForm" onclick="saveForm">Enviar respuestas</button>
<button type="button" class="btn btn-danger" id="clearForm">Limpiar formulario</button>
</div>
</section>
</div>
<article class="article">
<header class="article__header">
<h5>Proyecto T1. Seguridad Informatica</h5>
<span rel="author" class="byline">Universidad Andrés Bello
</div>
</article>
<footer class="footer">
<img class="footer__logo" src="https://vinculacion.unab.cl/wp-content/uploads/2018/06/fondo-transparente-logo-color-con-texto-blanco-y-3-palabras.png">
</footer>
</body>
</html>
Raw
script.js
var d = new Date();
// // $("input:radio[name='pregunta']:checked").val();
// guardar todos los datos.
$('#saveForm').click(() => {
var datas = {
tda: $('#tipoAtencion'),
fac: $('#fechaActual'),
fat: $('#fechaAtencion'),
man: $('#nombreCompleto'),
edd: $('#edadEncuestado'),
idn: $('#idIdentificacion'),
tel: $('#telefono'),
eps: $('#epsPaciente'),
p01: $('input:radio[name=pregunta1]:checked'),
p02: $('input:radio[name=pregunta2]:checked'),
p03: $('input:radio[name=pregunta3]:checked'),
p04: $('input:radio[name=pregunta4]:checked'),
p05: $('input:radio[name=pregunta5]:checked'),
p06: $('input:radio[name=pregunta6]:checked'),
p07: $('input:radio[name=pregunta7]:checked'),
p08: $('input:radio[name=pregunta8]:checked'),
p09: $('input:radio[name=pregunta9]:checked'),
p10: $('input:radio[name=pregunta10]:checked'),
p11: $('input:radio[name=pregunta11]:checked'),
p12: $('input:radio[name=pregunta12]:checked'),
p13: $('#pregunta13'),
p14: $('#pregunta14'),
com: $('#comentarios'),
}
console.log('ejecutando...')
console.log(datas)
console.log(d)
});
// $('#clearForm').click(()=>{
// alert('hola mundos')
// });
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css"></script>
Raw
style.css
.font-display {
font-family: 'Suez One', serif;
}
.font-body {
font-family: 'Fira Sans', sans-serif;
}
.header {
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
}
.header--purple {
background-color: purple;
}
.header__title {
text-align: left;
font-size: 25px;
margin: 0;
}
.header--purple .header__title {
color: white;
}
.header__logo {
width: 380px;
}
.header__logo img {
width: 60%;
}
.info {
max-width: 700px;
padding: 25px;
margin: 0 auto;
}
.info__text {
font-size: 30px;
line-height: 1.5;
margin: 0 0 30px 0;
}
.info__link-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.info__link-list-item {
margin-bottom: 20px;
}
.button {
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
color: purple;
border: 8px solid purple;
padding: 35px 45px;
border-radius: 80px;
max-width: 500px;
margin: 0 auto;
}
.button:hover {
background: purple;
color: white;
}
.article {
max-width: 700px;
margin: 0 auto;
padding: 25px;
}
.article__header {
border-bottom: 1px solid black;
padding-bottom: 20px;
margin-bottom: 20px;
}
.article__header h1 {
font-size: 20px;
font-family: 'Suez One', serif;
margin: 0 0 8px 0;
}
.article__header .byline {
font-size: 16px;
font-family: 'Fira Sans', sans-serif;
}
.article__body p {
font-family: 'Fira Sans', sans-serif;
font-size: 18px;
line-height: 1.4;
margin: 15px 0;
}
.article__body p:last-child,
.article__body img:last-child {
margin: 15px 0 0 0;
}
.article__body img {
max-width: 100%;
margin: 15px 0
}
.footer {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
background: purple;
padding: 40px;
}
.footer__logo {
display: block;
max-width: 120px;
margin-bottom: 10px;
}
.footer__text {
font-size: 16px;
color: white;
margin: 0;
}
.form-group {
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment