Najprostsze narzędzie do testu 5 sekund

Spis treści

Przykład prościutkiego wręcz łopatologicznego narzędzia do przeprowadzania testów 5 sekund.
Wersja pobierz, rozpakuj, skonfiguruj i używaj.

Założenia:

Wersja A

Działa na lokalnym komputerze
Jest przenośna
Nie wymaga ponoszenia żadnych kosztów
Nie wymaga dostępu do internetu
Odpowiedzi zbierane są ręcznie

Wersja B

Jest przenośna
Nie wymaga ponoszenia kosztów żadnych
Odpowiedzi są gromadzone automatycznie
Nie wymaga własnego serwera domeny itd.

Rozwiązanie:

W obu wersjach posłużymy się dwoma plikami html, oraz jedną grafiką (zrzut ekranu badanej strony), dodatkowo na potrzeby wersji A załączony jest plik tekstowy

Zawartość pliku index.html

Plik zawiera opis dla testującego użytkownika jak realizować test i odwołanie do pliku realizującego badanie.

<html><head>
    <meta charset="utf-8">
    <title>Test 5 sekund wprowadzenie</title>
<script>
    var screenAvailWidth = window.screen.availWidth;
    var screenAvailHeight = window.screen.availHeight;
  </script>

  </head><body style="margin:20; padding: 10;">
    <h1>To jest strona wprowadzająca do testu 5 sekund</h1>
    <p>Przypatrz się obrazkowi po kliknieciu przycisku poniżej i postaraj się zapamiętać z niego jak najwięcej.</p>
    <button onclick='w=window.open("./test.html","","top=0,left=0,width=1024,height=960");w.resizeTo(screenAvailWidth,screenAvailHeight)'>Kliknj tutaj żeby zobaczyć testowy obrazek</button>
    <p>Po pokazie obrazka zostanie przedstawiona Ci ankieta do wypełnienia.</p>
    <p>Dziękuję za pomoc.</p>

  </body></html>

W powyższym kodzie pomiędzy znacznikami <h1></h1> oraz <p></p> możesz zmieniać opisy i polecenia skierowane do testującego. Rozmiar okna przeglądarki prezentujący zrzut ekranu jest równy rozmiarowi ekranu na którym jest wywołany, zadbaj żeby grafika też miała taką rozdzielczość.

Zawartość pliku test.html

Plik zawiera odnośnik do obrazka oraz przekierowanie do miejsca zbierania danych lub listy pytań. Ja standardowo używam w tym miejscu formularzy od google.

<html><head>
  <meta http-equiv="Refresh" content="5; url=https://forms.gle/5qvEAsZ2yicyhFuaA"/>
  <meta charset="utf-8">
  <title>Test 5 sekund oglądanie</title>
</head><body style="margin:0; padding: 0;">
  <img src="zrzut_ekranu.png" style="display:block; margin: 0; padding: 0;">
</body></html>

Wersja A

Jeżeli działamy bez dostępu do internetu zamieniamy zawartość drugiej linii na <meta http-equiv=”Refresh” content=”5; url=./pytania.txt” /> gdzie plik pytania.txt zawiera listę pytań do wyświetlenia.

Wersja B

Jeśli chcemy zbierać odpowiedzi do ankiety w sieci to w powyższym kodzie zmieniamy moją wartość parametru url=https://forms.gle/5qvEAsZ2yicyhFuaA na adres własnej ankiety udostępnionej w sieci url=https://ulubiony_ system_ankietowania.

Opis użycia narzędzia do testu 5 sekund

Przygotowanie

1 Pobierasz plik i rozpakowujesz jego zawartość do dowolnego (najlepiej nowego) katalogu.

2 Tworzysz zrzut ekranu strony którą chcesz badać i zapisujesz jako zrzut_ekranu.png. Możesz też zapisać pod dowolną nazwą, ale wtedy musisz zmienić w przedostatniej linii pliku test.html słowo zrzut_ekranu.png na swoją nazwę nadaną zapisanemu plikowi ze zrzutem.

3 Kopiujesz / przenosisz plik ze zrzutem ekranu do katalogu z plikami index.html i test.html.

4 Uruchamiasz plik index.html za pomocą przeglądarki internetowej (zazwyczaj dwuklik na nim wystarcza) i sprawdzasz domyślne opisy oraz instrukcje dla testującego.

5 Jeżeli istniejące opisy i instrukcja Ci nie pasują to poprawiasz je zgodnie z opisem podanym wyżej

6 Jeżeli wybierasz wersję A to wypełniasz plik pytania.txt swoimi pytaniami (najlepiej każde w osobnej linii) i zmieniasz drugą linię w pliku test.html na <meta http-equiv=”Refresh” content=”5; url=./pytania.txt” />

7 Jeżeli wybierasz wersję B to tworzysz w swoim ulubionym narzędziu online ankietę i jej adres wstawiasz jako parametr po url= w drugiej linii pliku test.html zamiast wstawionej tam mojej ankiety.

Używanie

Możesz tak przygotowane narzędzie udostępnić testującym na swoim komputerze albo wrzucić na jakiś serwer (ja tak zrobiłem z demo), możesz spakować cały katalog i wysłać mailem, albo w inny sposób udostępnić testującym razem z instrukcją jak rozpakować i że mają kliknąć w index.html żeby móc uczestniczyć w badaniu.