HRI-Survey-Website/app.js at main · moarrows/HRI-Survey-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
main();

let player = videojs("my-video");
let breath_source = {src: "videos/breathing.mp4", type: "video/mp4"};
let talk_source = {src: "videos/talking.mp4", type: "video/mp4"};

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

async function waitforSpace() {
  return new Promise((resolve) => {
    document.addEventListener('keydown', onKeyHandler);
    function onKeyHandler(e) {
      if (e.keyCode === 32) {
        document.removeEventListener('keydown', onKeyHandler);
        resolve();
      }
    }
  });
}

async function startSpeech() {
  return new Promise((resolve) => {
    document.addEventListener('keydown', onKeyHandler);
    async function onKeyHandler(e) {
      if (e.keyCode === 32) {
        document.querySelector('p').style.visibility = "visible";
        document.querySelector('p').innerHTML = `Pressed space`;
        await sleep(1000);
        document.querySelector('p').style.visibility = "hidden";
      }
    }
  });
}

async function main() {
    // Press space to start video
    await waitforSpace();
    const t0 = performance.now();
    document.querySelector('p').style.visibility = "hidden";
    player.play();
    document.getElementById("you").style.color = 'white';
    document.getElementById("nao").style.color = 'aqua';
    document.getElementById("you").innerHTML = "You: I have a slight cough.";

    await sleep(100);
    startSpeech();

    await sleep(3000);
    document.getElementById("you").style.display = 'none';
    document.getElementById("nao").innerHTML = "Nao: I'm sorry to hear that. Have a cough drop.";
    player.src({ type: 'video/mp4', src: "videos/talking.mp4" });
    player.play();

    await waitforSpace();
    document.getElementById("nao").style.display = 'none';
    document.getElementById("you").style.display = "block";
    document.getElementById("you").innerHTML = "You: Thanks!";
    player.src({ type: 'video/mp4', src: "videos/breathing.mp4" });
    player.play();

    await sleep(2000);
    document.getElementById("you").style.display = 'none';
    document.getElementById("nao").style.display = "block";
    document.getElementById("nao").innerHTML = "Nao: No problem. Do you need anything else?";
    player.src({ type: 'video/mp4', src: "videos/talking.mp4" });
    player.play();

    await waitforSpace();
    document.getElementById("nao").style.display = 'none';
    document.getElementById("you").style.display = "block";
    document.getElementById("you").innerHTML = "You: I'm good thanks.";
    player.src({ type: 'video/mp4', src: "videos/breathing.mp4" });
    player.play();


    // const t1 = performance.now();
    // document.querySelector('p').style.visibility = "visible";
    // document.querySelector('p').innerHTML = `Time elapsed: ${t1-t0}`;
}