Bläddra i källkod

Add guia.html with txt file format description

Upate index.html to describe the new process to create a form

Update create_form.php page output to show link to form and secret since no smtp is available
Lucas de Souza 3 år sedan
förälder
incheckning
ec49e31a2a
8 ändrade filer med 218 tillägg och 27 borttagningar
  1. 6 7
      app/create_form.php
  2. 11 0
      assets/js/closealert.js
  3. 10 3
      controller/forms.php
  4. 11 0
      explorer/index.php
  5. 90 0
      guia.html
  6. 11 17
      index.html
  7. 9 0
      templates/create_form.html
  8. 70 0
      templates/created_successful.html

+ 6 - 7
app/create_form.php

@@ -60,7 +60,12 @@ function proccessRequest ($data) {
         $html = generateFormHTML($form);
         storeNewForm($form, $keys, $formSource);
         $path = saveHTML($form['title'], $keys[1], $html);
-        echo "Questionário gerado com sucesso. Acesse o <a href='../forms/$path'>link</a> para visualizar seu questionario!";
+        $link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ?
+            "https" : "http") . "://" . $_SERVER['HTTP_HOST'] .
+            '/forms/'.$path;
+        $context = ['link'=>$link, 'secret'=>$keys[0], 'title'=>$form['title']];
+        $success = getTemplate('created_successful.html');
+        echo parseTemplate($success, $context);
 
     } catch (Exception $e) {
         echo 'Os dados do formulários são inválidos! Certifique-se que todos os dados foram enviados e estão no formato correto: '.$e->getMessage().'<br/>';
@@ -68,12 +73,6 @@ function proccessRequest ($data) {
     }
 }
 
-function cleanTitle ($title) {
-    $clearstring = filter_var($title, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
-    $clearstring = trim(preg_replace("/[^a-zA-Z0-9 ]/",'',$clearstring));
-    $clearstring = trim(preg_replace("/[[:space:]]+/",'_',$clearstring));
-    return strtolower($clearstring);
-}
 
 function saveHTML ($title, $folder,$html) {
     $date = new DateTime();

+ 11 - 0
assets/js/closealert.js

@@ -0,0 +1,11 @@
+window.onbeforeunload = function(e) {
+  var e = e || window.event;
+
+  // For IE and Firefox prior to version 4
+  if (e) {
+    e.returnValue = "Any string";
+  }
+
+  // For Safari
+  return "Any string";
+};

+ 10 - 3
controller/forms.php

@@ -16,6 +16,13 @@
 
  require_once ('../config/linequest.php');
 
+ function cleanTitle ($title) {
+    $clearstring = filter_var($title, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
+    $clearstring = trim(preg_replace("/[^a-zA-Z0-9 ]/",'',$clearstring));
+    $clearstring = trim(preg_replace("/[[:space:]]+/",'_',$clearstring));
+    return strtolower($clearstring);
+ }
+
  function connect () {
     global $CFG, $DB;
     $DB  = new mysqli($CFG->dbhost, $CFG->dbuser, $CFG->dbpass, $CFG->dbname);
@@ -75,7 +82,7 @@
  function getQuestionaireInfoBySecret ($hash) {
     global $DB; connect();
 
-    $sql = "SELECT id,title FROM questionnaire WHERE edit_hash = ?";
+    $sql = "SELECT id, title, view_hash, created_at FROM questionnaire WHERE edit_hash = ?";
 
     if (!($stmt = $DB->prepare($sql))) {
         die("Prepare failed: (" . $DB->errno . ") " . $DB->error);
@@ -84,12 +91,12 @@
     $stmt->bind_param('s', $hash);
     $stmt->execute();
     $stmt->store_result();
-    $stmt->bind_result($qid, $title);
+    $stmt->bind_result($qid, $title,$view_hash, $date);
     if ($stmt->fetch()) {
        $stmt->free_result();
        $stmt->close();
        $DB->close();
-       return ['qid' => $qid, 'title' => $title];
+       return ['qid' => $qid, 'title' => $title, 'view_hash'=>$view_hash, 'date'=>$date];
     }
     throw new Exception("User attempted to submit data to a non-existent questionnaire.");
  }

+ 11 - 0
explorer/index.php

@@ -88,6 +88,17 @@
     require_once('../controller/forms.php');
     $secret = $_SESSION['hash_user'];
     $form_id = get_user_form($secret);
+    $info = getQuestionaireInfoBySecret($secret);
+
+    $folder = $info['view_hash'];
+    $cleanTitle = cleanTitle($info['title']);
+    $date = new DateTime($info['date']);
+    $datePart = $date->format("Y-m-j");
+    $filePath = "$datePart-$cleanTitle-$folder.html";
+    $link = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ?
+                "https" : "http") . "://" . $_SERVER['HTTP_HOST'] .
+                '/forms/'.$filePath;
+    echo "<p>Link para seu questionário: <a target='_blank' href='$link'>$link</a></p>"
     ?>
 
     <table>

+ 90 - 0
guia.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <!-- Meta tags Obrigatórias -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+
+    <title>LInE Quest</title>
+
+    <style>
+      body {
+        background-color: #e9ecef;;
+      }
+      .page-header {
+        margin-top: 1em;
+        border-top: 1px solid rgb(155, 155, 155);
+        padding-top: .5em;
+      }
+      .badge {
+        font-size: 100%;
+      }
+      pre {
+        border: 1px solid black;
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="jumbotron">
+      <p style="float:right; color: #333; font-weight: 300;">Free Education, Private Data (FEPD)</p>
+      <img src="assets/img/logo.png" width="250px">
+      <p style="font-size: 21px; color: #333; font-weight: 300;">Plataforma para questionários</p>
+
+
+      <h3 class="page-header">Sobre o LInE Quest</h3>
+      <p>Este é um ambiente para a disponibilização de questionários públicos do Laboratório de Informática na Educação do Instituto de Matemática e Estatística da Universidade de São Paulo.
+        É desenvolvido e mantido pelos alunos de pós graduação Igor Moreira Félix e Lucas Mendonça de Souza.
+        Para conhecer nosso grupo e trabalhos que estamos desenvolvendo, visite o seguinte endereço: <a target="_blank" href="https://www.usp.br/line/">https://www.usp.br/line/</a>.</p>
+      <p>O LInE Quest é gratuito e de código aberto, podendo ser acessado e copiado na área de projetos do LInE: <a target="_blank" href="http://200.144.254.107/git/LInE/linequest">http://200.144.254.107/git/LInE/linequest</a>.</a></p>
+
+      <h3 class="page-header">Sintaxe do arquivo de texto</h3>
+      <p>O LInE Quest utiliza um arquivo de texto para gerar os questionários de maneira simplificada. <br>
+      A sintaxe desse arquivo segue algumas regras que devem ser seguidas a risca para que seu questionário seja gerado corretamente. <br>
+      O formato desse aquivo é inspirado no <a href="https://docs.moodle.org/310/en/Aiken_format">Aiken</a>. Veja abaixo um arquivo de exemplo para entender como você deve prosseguir para criar seu próprio questionário!
+      </p>
+<pre>
+<code>
+ 1. [D*] Este é o enunciado de uma questao discursiva obrigatória
+
+ 2. [M*] Enunciado de uma questãod e multipla escolha obrigatória
+ A. Primeira alternativa da questao 2
+ B. Segunda alternativa da questão 2
+
+ 3. [M] Essa é uma questão de multipla escolha não obrigatória
+ A. Primeira alternativa da questão 3
+ B. Segunda alternativa da questão 3
+ C. Terceira alternativa da questão 3
+
+ 4. [I] O I cria um campo simples de texto ao invés de uma área para texto
+
+ 5. [S] Uma questão do tipo S é uma questão de multipla escolha que apresenta as alternativas de forma simplificada
+ A. Primeira alternativa da questão 5
+ B. Segunda alternativa da questão 5
+ C. Terceira alternativa da questão 5
+
+ # Esse é um comentário que é representado por # no ínicio da linha, eles são sempre ignorados pelo processador.
+</code>
+</pre>
+  <p>Observações</p>
+  <ul>
+    <li>O número de uma questão <b>DEVE</b> ser único.</li>
+    <li> Os tipos de questão são: D, I, M e S. Essas letras são <b>SEMPRE</b> maiúsculas e <b>DEVEM</b> ser inseridas entre [...] como no exemplo acima.<br>
+      D represta questões discursivas respondidas em uma caixa para textos longos<br>
+      I represta questões discursivas respondidas em uma caixa para textos curtos<br>
+      M represta questões múltipla escolha respondidas através caixas com as alternativas <br>
+      S represta questões múltipla escolha respondidas através de um campo de seleção<br>
+    </li>
+    <li>Um *(asterísco) antes ou depois do tipo da questão indica que ela é obrigatória</li>
+    <li>As alternativas das questões do tipo multipla escolha <b>DEVEM</b> ser uma sequência de letras maiúsculas de A à Z, seguidas <b>obrigatoriamente</b> de um .(ponto).</li>
+  </ul>
+
+    <script src="assets/js/jquery-3.3.1.slim.min.js"></script>
+    <script src="assets/js/popper.min.js"></script>
+    <script src="assets/js/bootstrap.min.js"></script>
+  </body>
+</html>

+ 11 - 17
index.html

@@ -25,44 +25,38 @@
     </style>
   </head>
   <body>
-    
+
     <div class="jumbotron">
       <p style="float:right; color: #333; font-weight: 300;">Free Education, Private Data (FEPD)</p>
       <img src="assets/img/logo.png" width="250px">
       <p style="font-size: 21px; color: #333; font-weight: 300;">Plataforma para questionários</p>
-      
+
 
       <h3 class="page-header">Sobre o LInE Quest</h3>
-      <p>Este é um ambiente para a disponibilização de questionários públicos do Laboratório de Informática na Educação do Instituto de Matemática e Estatística da Universidade de São Paulo. 
+      <p>Este é um ambiente para a disponibilização de questionários públicos do Laboratório de Informática na Educação do Instituto de Matemática e Estatística da Universidade de São Paulo.
         É desenvolvido e mantido pelos alunos de pós graduação Igor Moreira Félix e Lucas Mendonça de Souza.
         Para conhecer nosso grupo e trabalhos que estamos desenvolvendo, visite o seguinte endereço: <a target="_blank" href="https://www.usp.br/line/">https://www.usp.br/line/</a>.</p>
       <p>O LInE Quest é gratuito e de código aberto, podendo ser acessado e copiado na área de projetos do LInE: <a target="_blank" href="http://200.144.254.107/git/LInE/linequest">http://200.144.254.107/git/LInE/linequest</a>.</a></p>
-      
+
       <h3 class="page-header">Estrutura do LInE Quest</h3>
       <p>Conheça na figura abaixo, a estrutura de diretórios que compõem o LInE Quest:</p>
       <img src="assets/img/structure.png" width="90px" style="margin-left: 1em;margin-bottom: 1em;">
 
       <h3 class="page-header">Como disponibilizar um questionário utilizando o LInE Quest</h3>
-      
+
       <p>Para disponibilizar seu questionário público, a fim de coletar dados relacionados às pesquisas, siga os passos abaixo:</p>
       <ol>
-        <li>Crie uma página HTML, contendo seu formulário. Caso ainda não tenha experiência com formulários, acesse <a target="_blank" href="https://www.coderepublics.com/HTML/html-form-input-types.php">este endereço</a>.</li>
+        <li>Crie um arquivo TXT com as questões do seu formulário seguindo as orientações do <a href="guia.html">nosso guia</a>.</li>
 
-        <li>Inclua no seu formulário, um campo oculto (type="hidden") com nome "form", com o valor que identifique o seu formulário. Exemplo: <span class="badge">&lt;input type="hidden" name="form" value="Pesquisa_iVProg"&gt;</span></li>
+        <li>Acesse a página de <a href="/app/create_form.php" >criação de questionários</a>.</li>
 
-        <li>Aponte seu formulário para o endereço <span class="badge">/linequest/app/post.php</span></li>
+        <li>Preencha os campos apresentados e faça o <i>upload</i> do arquivo TXT criado.</li>
 
-        <li>Disponibilize sua página HTML no diretório <span class="badge">/linequest/forms/</span> </li>
+        <li>Uma página será exibida com o apontador para seu questionário e um código acesso único para acessar a página do <a href="/explorer/login.php">explorador</a>. <b>Lembre-se de guardar esse código pois ele não será exibido novamente </b></li>
 
-        <li>Divulgue a página <span class="badge">http://usp.br/line/linequest/forms/MEUFORM.html</span></li>
-      </ol>
+        <!-- <li>Você receberá no email informado durante a criação do formulário um código de acesso e o apontador para seu formulário. Seu código de acesso é único e você deve utilizá-lo <a href="/explorer/login.php">aqui</a> para acessar os seus dados.</li> -->
 
-      <div class="alert alert-info" role="alert">
-        <b>Observação:</b>
-        Os dados podem ser enviados por meio de requisições HTTP pelos métodos
-        <span class="badge">GET</span>
-      e <span class="badge">POST</span>.</div>
-      
+      </ol>
 
       <h3 class="page-header">Como o LInE Quest armazena as informações</h3>
       <center><img src="assets/img/request.png" width="300rem" style="margin-top: 2em; margin-bottom: 1em;"></center>

+ 9 - 0
templates/create_form.html

@@ -44,6 +44,7 @@
     </div>
     <div class="form-div">
       <h3 class="">Criar questionário</h3>
+      <h5>Todos os campos são obrigatórios!</h5>
       <form enctype="multipart/form-data" action="{post_url}" method="POST">
         <div class="form-group">
           <label for="email">Email</label>
@@ -52,6 +53,7 @@
             class="form-control"
             id="email"
             name="email"
+            required="required"
           />
           <small id="emailHelp" class="form-text text-muted"
             >Email que receberá as informações de acesso ao questionário.</small
@@ -64,6 +66,7 @@
             name="title"
             type="text"
             class="form-control"
+            required="required"
           />
           <small id="titleHelp" class="form-text text-muted"
             >Título do seu questionário</small
@@ -77,6 +80,7 @@
             cols="15"
             rows="5"
             class="form-control"
+            required="required"
           ></textarea>
           <small id="introHelp" class="form-text text-muted"
             >Essa apresentação será aprensetado no início do seu
@@ -91,6 +95,7 @@
             cols="15"
             rows="5"
             class="form-control"
+            required="required"
           ></textarea>
           <small id="thanksHelp" class="form-text text-muted"
             >Essa mensagem será aprensetada no final do seu questionário.</small
@@ -103,7 +108,11 @@
             class="form-control-file"
             id="formSource"
             name="formSource"
+            required="required"
           />
+          <small id="formksHelp" class="form-text text-muted">
+            Faça o upload do arquivo de texto descrevendo seu formulário. Use este <a target="_blank" href="/guia.html">guia</a> em caso de dúvida.
+          </small>
         </div>
         <button class="btn btn-primary" type="submit">Enviar</button>
       </form>

+ 70 - 0
templates/created_successful.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <title>{title}</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta name="author" content="LInE" />
+    <link rel="stylesheet" href="/assets/foundation.min.css" />
+    <style>
+      .rotulo {
+        font-weight: bold;
+        background-color: #e4f1fa;
+        margin: 2px;
+      }
+      .required::before {
+        content: "* ";
+        color: red;
+      }
+      .condicional {
+        visibility: hidden;
+      }
+      .page {
+        display: none;
+      }
+      #btn_submit {
+        display: none;
+      }
+      legend {
+        font-weight: bold;
+      }
+      .spoiler-text {
+        background: black;
+        color: transparent;
+        cursor: help;
+        transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
+      }
+
+      .spoiler-text:hover,
+      .spoiler-text:focus {
+        background: #e8e8e8;
+        color: inherit;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="callout">
+      <p class="paragrafo lead text-justify">
+        Questionário criado com sucesso!<br />
+      </p>
+    </div>
+    <div class="callout primary">
+      O apontador de acesso ao seu questionário é:
+      <a target="_blank" href="{link}">{link}</a><br />
+      Para acessar seus dados entre nesta página:
+      <a target="_blank" href="/explorer/login.php">Explorador de dados</a
+      ><br />
+    </div>
+    <div class="callout alert">
+      <h5>ATENÇÃO</h5>
+      <p>
+        Seu código de acesso é:
+        <span class="spoiler-text" tatabindex="0">{secret}</span>.
+        <span
+          >Esse código é único e você deve guardá-lo pois ele não será mais
+          exibido!</span
+        >
+      </p>
+    </div>
+    <script src="/assets/js/closealert.js"></script>
+  </body>
+</html>