Kolejne kroki związane z projektem – Testy A/B

Na stronie wszystkie elementy są testowane niezależnie od siebie. Testuje kolor buttona, display buttona, tekst, obraz, kolor tekstu oraz film. Losowanie odbywa się na odświeżeniu karty.

Wreszcie udało mi się znaleźć błąd w kodzie. Poprawiłam obydwie uniwersalne funkcje. Jedna pozwala na wybranie CSS property i testowanie dwóch wariantów np. jeden z dwóch kolorów czcionki, jednego z kolorów tła, display. Druga funkcja pozwala na np. losowanie jednej z dwóch ścieżek do obrazka bądź filmu, a także na testowanie treści tekstu na stronie.

function drawOneCssProperty(whatToTest, optionA, optionB, elementId) {
  const testedElement = document.getElementById(elementId);
  var randomNumber = Math.random();
  if (randomNumber < 0.5) {
    testedElement.style[whatToTest] = optionA;
  } else {
    testedElement.style[whatToTest] = optionB;
  }
}

function drawOneOption(whatToTest, optionA, optionB, elementId) {
  const testedElement = document.getElementById(elementId);
  var randomNumber = Math.random();
  if (randomNumber < 0.5) {
    testedElement[whatToTest] = optionA;
  } else {
    testedElement[whatToTest] = optionB;
  }
}

A tutaj poniżej wywołuje funkcje. Testowane argumenty są przekazywane w osobnym pliku.

function testColor(colorA, colorB, elementId) {
    drawOneCssProperty('backgroundColor', colorA, colorB, elementId);
}

function testTextColor(colorA, colorB, elementId) {
    drawOneCssProperty('color', colorA, colorB, elementId);
}

function testDisplay(elementId) {
    drawOneCssProperty('display', 'none', 'inline-block', elementId);
}

function testTekst(textA, textB, elementId) {
    drawOneOption('innerHTML', textA, textB, elementId);
}

function testImage(imageSrcA, imageSrcB, elementId) {
    drawOneOption('src', imageSrcA, imageSrcB, elementId);
}

function testIframe(iframeSrcA, iframeSrcB, elementId) {
    drawOneOption('src', iframeSrcA, iframeSrcB, elementId);
}

function testVideo(videoSrcA, videoSrcB, elementId) {
    drawOneOption('src', videoSrcA, videoSrcB, elementId);
}

export { testColor,  testTekst, testImage, testDisplay, testTextColor, testIframe, testVideo};

Co dalej? 

1. Będę przechowywać informacje o wynikach losowania w local storage.
2. Zamierzam pobrać informacje o użytkowniku, który wejdzie na testowaną stronę.
3. Testowanie nie na odświeżeniu strony, ale na jednej sesji
4. Będę nasłuchiwać na eventy – czyli sprawdzać czy użytkownik podjął akcje na stronie np. kliknął na button, odtworzył wideo za pomocą uniwersalnej funkcji, która pozwoli na nasłuchiwanie na dowolnym elemencie strony.
5. Będę badać jak wpływa zmiana jednego elementu na inny, czyli np. jak zmiana obrazu na stronie będzie wpływać na klikalność buttona. Do tego będzie potrzebna funkcja, w której będzie trzeba podać id testowanego elementu oraz id elementu na którym badamy ilość eventów.