-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathmus3335.html
More file actions
178 lines (164 loc) · 10.2 KB
/
mus3335.html
File metadata and controls
178 lines (164 loc) · 10.2 KB
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<head>
<title>MUS 3335 - Fill in the blanks.</title>
<style>
body {
background: rgba(255, 248, 220, 0.5);
font-family: Verdana;
position: relative;
padding-bottom: 50px;
}
div {
background-color: white;
}
.div-form {
margin-left: 30px;
margin-right: 30px;
text-align: center;
line-height: 1.5;
margin: 15px;
border: solid blue 1px;
border-radius: 15px;
padding: 8px;
}
.footer {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
text-align: right;
border: none !important;
font-size: 8pt;
}
.input {
border-radius: 2px;
font-weight: bold;
color: blue;
border-bottom: 2px blue solid;
border-top: none;
border-left: none;
border-right: none;
font-size: 12pt;
}
.wrong {
color: red !important;
border-color: red !important;
background: rgba(255, 0, 0, 0.2) !important;
}
.correct {
color: green !important;
border-color: green !important;
background: rgba(0, 255, 0, 0.2) !important;
}
</style>
<script>
function shuffle(arr) {
// In-place shuffle by Fisher-Yates algorithm
for (let i = arr.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
const blurb = `While we think of Mahler and Bruckner as {late romantic composers}, we think of Debussy, Satie, and Ravel as thoroughly {modern composers}. Bartok and Vaughn Williams are both influenced by {folk music and nationalism} but in quite different ways. While Britten is of course a {British composer}, his music is not truly {national} as much as it is {modern}, and {modernity knows no country}. Stravinsky changes over the course of his lifetime, from a {modern experimentalist} with the early ballets like the <em>Rite of Spring</em>, to a {neo-classicist} with <em>Oedipus</em> as we saw, and ultimately to a {serial or twelve-tone composer}. Schoenberg is a {serial or twelve-tone composer} of course, but he too flirts with {neo-classicism} and his first works are often called {late romantic}. composers like Messiaen and Boulez {extend serialism} to encompass dimensions other than pitch. Aaron Copland's best known works rely upon a stripped-down style that mixes {modern harmonies} built in large part of {fifths and fourths} with {American folk-songs}. This style makes its way into Canada, to influence the work of composers writing for the {National Film Board of Canada}. The influence of {Dadaism} makes its way into music with {Antheil's Ballet Mécanique / Antheil's Ballet Mecanique}. A stream of {radical experimentalism} flows through composers such as {Henry Cowell} to Cage and beyond. Edgard Varése is important to bringing this {to America}, and he also experiments with {electronic music} as does Pierre Schaefer with whom we associate the term {musique concrète / musique concrete}, music created out of an {assemblage of tape-recorded sounds} in this instance. {Partch and Nancarrow} create remarkable instruments or use mechanical instruments like the {player piano}. Experimentation with instruments produces the {theramin} as well as the electric guitar and electric piano, and ultimately the {sythesizer both analog and digital / synthesizer both analog and digital}. The voice is not exempt from experimentation, witness Joan La Barbara's {Circular Song}. Perhaps the most extreme experiments in music are those created by Alvin Lucier ({"I am sitting in a room"}), Hildegard Westerkamp (in {"Talking Rain"}), and {Steve Reich} (at an early stage in his career with {"Come out"}), who work with recorded sounds and the possibilities of {taped sound distortion}. The most extreme aspect of experimental {live musical performance} is the use of {freely or minimally notated musical scores}, as in the scores of Earle Brown, which are {aleatoric}, leaving many elements of performance up to the {performer themselves}. The term {minimalism} has been applied to the very slow music of {Morton Feldman} and of La Monte Young, but also to describe what is probably more accurately called {phase music}, such as that of {Riley, Reich, and Glass}. The latter are influenced by {popular music}, as is Michael Nyman, whose {film scores} are perhaps best known. While these formes of music would appear not to have explicit {political content}, music by {Rzewski} and the late Cornelius Cardew is explicitly {political} in nature. Whether through sheer listening fatigue or through the rise of conservative politics in the 1980s in the West, a {reactionary} style of music appears, one that marks a return to {tonality} or at least to {consonance}. most notably in the music of {Arvo Part} and Sophia Gubaidulina in Europe and {Christos Hatzis} here in Canada. Ultimately the work of {Laurie Anderson} and others like her reconciles {politics and experimentalism} in a style that combines {popular music}, {phase music}, and {electronic synthesis}. In this regard, Canadian composers like Gorden Monahan and {John Oswald} are at the forefront. You will notice that, sadly and with rare exception, {women composers} do not figure in this brief description. Although great inroads were made, especially in the last decades, new music is still a bit of a male bastion. Perhaps the next millennium will see events turn out otherwise.`
const blurbcount = blurb.match(/{.+?}/g).length;
const numberArray = new Array(blurbcount).fill(0).map((n, i) => i);
const startMenu = `<button onclick="loadQuiz()">All blanks are empty</button> | <button onclick="loadQuiz(20)">20 blanks are empty</button>`;
let chosen, answerKey, startTime;
function escapeHTML (str) {
return ('' + str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g, '/');
}
function getTimeAgo (time) {
time = Math.floor((Date.now() - time) / 1000);
var seconds = time % 60;
var times = [];
if (seconds) times.push(seconds + (seconds === 1 ? " second" : " seconds"));
if (time >= 60) {
time = Math.floor((time - seconds) / 60);
var minutes = time % 60;
if (minutes) times.unshift(minutes + (minutes === 1 ? " minute" : " minutes"));
if (time >= 60) {
time = Math.floor((time - minutes) / 60);
var hours = time % 24;
if (hours) times.unshift(hours + (hours === 1 ? " hour" : " hours"));
if (time >= 24) {
time = Math.floor((time - hours) / 24);
var days = time % 365;
if (days) times.unshift(days + (days === 1 ? " day" : " days"));
if (time >= 365) {
var years = Math.floor((time - days) / 365);
if (days) times.unshift(years + (years === 1 ? " year" : " years"));
}
}
}
}
if (!times.length) return "0 seconds";
return times.join(", ");
}
function loadQuiz (blanks = blurbcount) {
chosen = shuffle(numberArray.slice(0)).slice(0, blanks);
let currentnumber = -1;
startTime = Date.now();
let display = blurb.replace(/{.+?}/g, match => {
const answers = match.slice(1, -1).split('/').map(p => p.trim());
currentnumber++;
if (chosen.includes(currentnumber)) {
// this becomes a blank!
return `<input type="text" size="${answers[0].length + 5}" id="${currentnumber}" class="input"></input>`;
} else {
return answers[0];
}
});
let form = document.getElementById('form')
form.innerHTML = display;
form.style.display = 'block';
document.getElementById('navigation').innerHTML = `<button onclick="markQuiz()">Mark the Quiz!</button>`;
}
function markQuiz() {
let correct = 0;
let currentnumber = -1;
let display = blurb.replace(/{.+?}/g, match => {
const answers = match.slice(1, -1).split('/').map(p => p.trim());
currentnumber++;
if (chosen.includes(currentnumber)) {
let useranswer = document.getElementById(currentnumber).value;
let value = '';
let className = 'input';
if (answers.includes(useranswer)) {
correct += 1;
value = escapeHTML(useranswer);
className += ' correct';
} else {
className += ' wrong';
value = `${escapeHTML(useranswer)} [Correct: ${escapeHTML(answers[0])}]`;
}
// this becomes a blank!
return `<input type="text" size="${value.length + 1}" id="${currentnumber}" class="${className}" value="${value}" disabled></input>`;
} else {
return answers[0];
}
});
let elapsed = getTimeAgo(startTime);
let prevRecord = parseInt(localStorage.getItem(chosen.length)) || 0;
let form = document.getElementById('form');
form.innerHTML = `<div style="text-align: center; font-weight: bold;">Congratulations, you got ${correct} / ${chosen.length} (${((correct / chosen.length) * 100).toFixed(2)}%) correct!${prevRecord === 0 && correct === 0 ? "" : prevRecord >= correct ? ` Your previous high score was ${prevRecord} / ${chosen.length}.` : " You have also set a new high score!"}<br /><span style="font-size: 8pt; font-style: italic">(Time taken: ${elapsed})</span></div><br />` + display;
document.getElementById('navigation').innerHTML = startMenu;
if (correct > prevRecord) localStorage.setItem(chosen.length, correct);
}
</script>
</head>
<body>
<div id="title" class='div-form' style="font-size: 16pt; font-weight: bold; font-style: italic; font; color: green; background-color: pink">
MUS 3335 Final Exam - Fill in the blanks practice!
</div>
<div id="form" class="div-form" style="display: none"></div>
<div id="navigation" class="div-form">
<button onclick="loadQuiz()">All blanks are empty</button>
|
<button onclick="loadQuiz(20)">20 blanks are empty</button>
</div>
<div id="footer" class="footer" style="background-color: inherit; background: inherit;">
The text in this quiz is written by Professor Murray Dineen, University of Ottawa, for the final exam for MUS 3335, in 2017. - If there are any mistakes, please email me at <a href="sparkychildcharlie@gmail.com">sparkychildcharlie@gmail.com</a>.
</div>
</body>