Este tutorial irá te ajudar a construir um card sorting digital do zero, utilizando os três módulos Base de Dados, WebForm e Análise.

<aside> ☝ Por enquanto só é possível criar card sortings abertos, ou seja, aqueles onde o usuário pode criar quantos clusters quiser, sem limitações.

Caso você esteja executando um card sorting digital porém moderado, pode orientar o participante a criar a quantidade definida de clusters.

</aside>

Pré-requisitos

Passo a passo

1. Copiar template da Base de Dados

Acesse o template de planilha abaixo e faça uma cópia. Sempre que organizar um card sorting, gere um novo arquivo de planilha.

1.0 Base de Dados - Open Card Sorter (Template)

2. Preencha os cartões para a sua atividade

Escreva a partir da coluna A4 os cartões que você utilizará na sua pesquisa. Caso algum cartão precise de maiores explicações, utiliza a coluna ao lado (B) para melhorar a descrição. Essa informação adicional será colocada como uma tooltip dentro do card, na página do WebForm.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0248ab3-6f7c-45c4-9518-fed0404f6359/Untitled.png

3. Crie um App Script para esta planilha

Vamos agora conectar um "plugin" à planilha do Sheets utilizando a ferramenta do Google Apps Script.

O Apps Script permitirá conectar o WebForm (uma página estática) à sua planilha do Google Sheets gratuitamente. Ele age como uma espécie de servidor que recebe requisições do WebForm e escreve na planilha.

  1. No Google Sheets, acesse o menu superior Extensões > Apps Script.

  2. Na página que se abrirá, exclua todo o código (tudo mesmo, deixa a página vazia) que veio autopreenchido e substitua pelo código abaixo. Ele será responsável por responder às chamadas da página HTML do WebForm e escrever as respostas dos participantes na planilha.

    var readSheetName = "Setup";
var cardsRange = "A4:B";
var writeSheetName = "Forms";

function doPost(e){
  var res = {};
  if(e.parameters.type == "write"){
    var rows = JSON.parse(e.parameters.values);
    rows.forEach(function(columns){
      var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(writeSheetName);
      var range = sheet.getRange(getLastRow(writeSheetName), 1, 1, columns.length);
      range.setValues([columns]);
    });
    res.status = "success";
  }
  return ContentService.createTextOutput(JSON.stringify(res));
}

function doGet(e) {
  var res = {};
  if(!e || e.parameters.type == "getCards"){
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(readSheetName);
    var cards = sheet.getRange(cardsRange).getValues().filter(function(v){ return v[0].length; });
    
    res.status = "success";
    res.result = cards;
  }
  return ContentService.createTextOutput(JSON.stringify(res));
}

function getLastRow(sheetName){
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(writeSheetName);
  var Avals = sheet.getRange("A1:A").getValues();
  return lastRow = Avals.filter(String).length + 1;
}

  3. Salve o arquivo com o mesmo nome que utilizou ao copiar a planilha (para facilitar lembrar depois).

  4. Na interface Apps Script antiga (legado): Na página do App Script, acesse no menu superior Publicar > Implantar como aplicativo da web. Na interface Apps Script nova: Na página do Apps Script, clique no botão Implantar > Nova implantação e selecione o tipo “App da Web”