-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathRSVP_test.html
142 lines (122 loc) · 12.8 KB
/
RSVP_test.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Story</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#instruction-container {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
}
#startButton {
font-size: 18px;
padding: 15px 30px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s ease;
}
#startButton:hover {
background-color: #45a049;
}
#word_display {
font-size: 28px;
text-align: center;
margin-top: 20px;
color: #333;
}
</style>
</head>
<body>
<div id="instruction-container" style="text-align: center; font-size: 24px; margin-top: 50px;">
<p>Click start when you are ready.</p>
<!-- Start Button -->
<button id="startButton" style="font-size: 18px; padding: 15px 30px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
Start
</button>
</div>
<div id="word_display" style="font-size: 28px; text-align: center; margin-top: 50px;"></div>
<script>
// const words = ["Once", "upon", "a", "time", "there", "were", "four", "little", "Rabbits,", "and", "their", "names", "were–", "Flopsy,", "Mopsy,", "Cotton-tail,", "and", "Peter.", "They", "lived", "with", "their", "Mother", "in", "a", "sand-bank,", "underneath", "the", "root", "of", "a", "very", "big", "fir-tree.", "Now", "my", "dears", "said", "old", "Mrs.", "Rabbit,", "one", "morning,", "you", "may", "go", "into", "the", "fields", "or", "down", "the", "lane,", "but", "don't", "go", "into", "Mr.", "McGregor's", "garden:", "your", "Father", "had", "an", "accident", "there;", "he", "was", "put", "in", "a", "pie", "by", "Mrs.", "McGregor.", "Now", "run", "along,", "and", "don't", "get", "into", "mischief.", "I", "am", "going", "out.", "Then", "old", "Mrs.", "Rabbit", "took", "a", "basket", "and", "her", "umbrella,", "and", "went", "through", "the", "wood", "to", "the", "baker's.", "She", "bought", "a", "loaf", "of", "brown", "bread", "and", "five", "currant", "buns.", "Flopsy,", "Mopsy,", "and", "Cottontail,", "who", "were", "good", "little", "bunnies,", "went", "down", "the", "lane", "to", "gather", "blackberries:", "But", "Peter,", "who", "was", "very", "naughty,", "ran", "straight", "away", "to", "Mr.", "McGregor's", "garden,", "and", "squeezed", "under", "the", "gate!", "First", "he", "ate", "some", "lettuces", "and", "some", "French", "beans;", "and", "then", "he", "ate", "some", "radishes;", "And", "then,", "feeling", "rather", "sick,", "he", "went", "to", "look", "for", "some", "parsley.", "But", "round", "the", "end", "of", "a", "cucumber", "frame,", "whom", "should", "he", "meet", "but", "Mr.", "McGregor!", "Mr.", "McGregor", "was", "on", "his", "hands", "and", "knees", "planting", "out", "young", "cabbages,", "but", "he", "jumped", "up", "and", "ran", "after", "Peter,", "waving", "a", "rake", "and", "calling", "out,", "'Stop", "thief!'", "Peter", "was", "most", "dreadfully", "frightened;", "he", "rushed", "all", "over", "the", "garden,", "for", "he", "had", "forgotten", "the", "way", "back", "to", "the", "gate.", "He", "lost", "one", "of", "his", "shoes", "among", "the", "cabbages,", "and", "the", "other", "shoe", "amongst", "the", "potatoes.", "After", "losing", "them,", "he", "ran", "on", "four", "legs", "and", "went", "faster,", "so", "that", "I", "think", "he", "might", "have", "got", "away", "altogether", "if", "he", "had", "not", "unfortunately", "run", "into", "a", "gooseberry", "net,", "and", "got", "caught", "by", "the", "large", "buttons", "on", "his", "jacket.", "It", "was", "a", "blue", "jacket", "with", "brass", "buttons,", "quite", "new.", "Peter", "gave", "himself", "up", "for", "lost,", "and", "shed", "big", "tears;", "but", "his", "sobs", "were", "overheard", "by", "some", "friendly", "sparrows,", "who", "flew", "to", "him", "in", "great", "excitement,", "and", "implored", "him", "to", "exert", "himself.", "Mr.", "McGregor", "came", "up", "with", "a", "sieve,", "which", "he", "intended", "to", "pop", "upon", "the", "top", "of", "Peter;", "but", "Peter", "wriggled", "out", "just", "in", "time,", "leaving", "his", "jacket", "behind", "him.", "And", "rushed", "into", "the", "tool-shed,", "and", "jumped", "into", "a", "can.", "It", "would", "have", "been", "a", "beautiful", "thing", "to", "hide", "in,", "if", "it", "had", "not", "had", "so", "much", "water", "in", "it.", "Mr.", "McGregor", "was", "quite", "sure", "that", "Peter", "was", "somewhere", "in", "the", "tool-shed,", "perhaps", "hidden", "underneath", "a", "flower-pot.", "He", "began", "to", "turn", "them", "over", "carefully,", "looking", "under", "each.", "Presently", "Peter", "sneezed--'Kertyschoo!'", "Mr.", "McGregor", "was", "after", "him", "in", "no", "time.", "And", "tried", "to", "put", "his", "foot", "upon", "Peter,", "who", "jumped", "out", "of", "a", "window,", "upsetting", "three", "plants.", "The", "window", "was", "too", "small", "for", "Mr.", "McGregor,", "and", "he", "was", "tired", "of", "running", "after", "Peter.", "He", "went", "back", "to", "his", "work.", "Peter", "sat", "down", "to", "rest;", "he", "was", "out", "of", "breath", "and", "trembling", "with", "fright,", "and", "he", "had", "not", "the", "least", "idea", "which", "way", "to", "go.", "Also", "he", "was", "very", "damp", "with", "sitting", "in", "that", "can.", "After", "a", "time", "he", "began", "to", "wander", "about,", "going", "lippity--lippity--not", "very", "fast,", "and", "looking", "all", "round.", "He", "found", "a", "door", "in", "a", "wall;", "but", "it", "was", "locked,", "and", "there", "was", "no", "room", "for", "a", "fat", "little", "rabbit", "to", "squeeze", "underneath.", "An", "old", "mouse", "was", "running", "in", "and", "out", "over", "the", "stone", "doorstep,", "carrying", "peas", "and", "beans", "to", "her", "family", "in", "the", "wood.", "Peter", "asked", "her", "the", "way", "to", "the", "gate,", "but", "she", "had", "such", "a", "large", "pea", "in", "her", "mouth", "that", "she", "could", "not", "answer.", "She", "only", "shook", "her", "head", "at", "him.", "Peter", "began", "to", "cry.", "Then", "he", "tried", "to", "find", "his", "way", "straight", "across", "the", "garden,", "but", "he", "became", "more", "and", "more", "puzzled.", "Presently,", "he", "came", "to", "a", "pond", "where", "Mr.", "McGregor", "filled", "his", "water-cans.", "A", "white", "cat", "was", "staring", "at", "some", "gold-fish,", "she", "sat", "very,", "very", "still,", "but", "now", "and", "then", "the", "tip", "of", "her", "tail", "twitched", "as", "if", "it", "were", "alive.", "Peter", "thought", "it", "best", "to", "go", "away", "without", "speaking", "to", "her;", "he", "had", "heard", "about", "cats", "from", "his", "cousin,", "little", "Benjamin", "Bunny.", "He", "went", "back", "towards", "the", "tool-shed,", "but", "suddenly,", "quite", "close", "to", "him,", "he", "heard", "the", "noise", "of", "a", "scr-r-ritch,", "scratch,", "scratch,", "scritch.", "Peter", "scuttered", "underneath", "the", "bushes.", "But", "presently,", "as", "nothing", "happened,", "he", "came", "out,", "and", "climbed", "upon", "a", "wheelbarrow", "and", "peeped", "over.", "The", "first", "thing", "he", "saw", "was", "Mr.", "McGregor", "hoeing", "onions.", "His", "back", "was", "turned", "towards", "Peter,", "and", "beyond", "him", "was", "the", "gate!", "Peter", "got", "down", "very", "quietly", "off", "the", "wheelbarrow;", "and", "started", "running", "as", "fast", "as", "he", "could", "go,", "along", "a", "straight", "walk", "behind", "some", "black-currant", "bushes.", "Mr.", "McGregor", "caught", "sight", "of", "him", "at", "the", "corner,", "but", "Peter", "did", "not", "care.", "He", "slipped", "underneath", "the", "gate,", "and", "was", "safe", "at", "last", "in", "the", "wood", "outside", "the", "garden.", "Mr.", "McGregor", "hung", "up", "the", "little", "jacket", "and", "the", "shoes", "for", "a", "scare-crow", "to", "frighten", "the", "blackbirds.", "Peter", "never", "stopped", "running", "or", "looked", "behind", "him", "till", "he", "got", "home", "to", "the", "big", "fir-tree.", "He", "was", "so", "tired", "that", "he", "flopped", "down", "upon", "the", "nice", "soft", "sand", "on", "the", "floor", "of", "the", "rabbit-hole", "and", "shut", "his", "eyes.", "His", "mother", "was", "busy", "cooking;", "she", "wondered", "what", "he", "had", "done", "with", "his", "clothes.", "It", "was", "the", "second", "little", "jacket", "and", "pair", "of", "shoes", "that", "Peter", "had", "lost", "in", "a", "Fortnight!", "I", "am", "sorry", "to", "say", "that", "Peter", "was", "not", "very", "well", "during", "the", "evening.", "His", "mother", "put", "him", "to", "bed,", "and", "made", "some", "camomile", "tea;", "and", "she", "gave", "a", "dose", "of", "it", "to", "Peter!", "One", "table-spoonful", "to", "be", "taken", "at", "bed-time.'", "But", "Flopsy,", "Mopsy,", "and", "Cotton-tail", "had", "bread", "and", "milk", "and", "blackberries", "for", "supper."];
const words = ["Once", "upon"];
// Get the container element where words will be displayed
const container = document.getElementById('word_display');
let index = 0;
const displayInterval = 500; // Display each word for 500ms
// Function to go full screen
function goFullScreen() {
const elem = document.documentElement; // Request full screen for the document
if (elem.requestFullscreen) {
elem.requestFullscreen(); // Standard Fullscreen API
} else if (elem.mozRequestFullScreen) { // Firefox
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { // Chrome and Safari
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { // IE
elem.msRequestFullscreen();
}
}
// Function to display words with non-slip timing
function displayWords() {
let startTime = performance.now();
container.style.fontSize = "50px";
function loop(timestamp) {
const elapsed = performance.now() - startTime;
// Check if it's time to display the next word
if (elapsed >= displayInterval * index) {
container.innerHTML = words[index]; // Display the current word
index++;
// If all words are displayed, show the end message
if (index > words.length) {
container.style.fontSize = "24px";
container.innerHTML = `
<p>The End! You may now close this tab.</>
<p><small><em>"The Tale of Peter Rabbit"</em> by Beatrix Potter, available on <a href="https://freekidsbooks.org" target="_blank" style="color: blue;">FreeKidsBooks.org</a>.</small></p>
`;
return;
}
}
// Continue calling the loop until all words are displayed
requestAnimationFrame(loop);
}
// Start the animation loop
requestAnimationFrame(loop);
}
// Display the "The story is about to start" message for 10 seconds
function showIntroMessage() {
container.innerHTML = `
<p>The story is about to start.</p>
<p><small><em>"The Tale of Peter Rabbit"</em> by Beatrix Potter, available on FreeKidsBooks.org.</small></p>
`;
setTimeout(displayWords, 10000);
}
// Start the full screen and experiment after the button is clicked
function startExperiment() {
goFullScreen(); // Make the experiment full screen
showIntroMessage(); // Show the intro message
}
// Event listener for the "Start the Experiment" button click
const startButton = document.getElementById('startButton');
startButton.addEventListener('click', function() {
startButton.style.display = 'none';
document.getElementById('instruction-container').style.display = 'none';
startExperiment(); // Start the full screen and the experiment
});
</script>
</body>
</html>