-
Notifications
You must be signed in to change notification settings - Fork 0
/
summaryQuizPageText.html
159 lines (149 loc) · 8.35 KB
/
summaryQuizPageText.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Summary and Quiz</title>
<link rel = "stylesheet" href="summaryQuizPage.css">
</head>
<body>
<div class="container">
<div class="row video-summary">
<div class="col-md-1"></div>
<div class="summary col-md-6">
<p>Text</p>
<p id="textbody">Lorem ipsum dolor sit amet, at nullam laboramus vel, vix ei dicit pertinacia. Te fabulas tincidunt definitionem nec, commune assentior appellantur usu id. Ne mea nusquam docendi, ne eam oratio omittantur mediocritatem, est euismod adolescens no. In audire tritani vulputate est. Te maiorum perpetua pri, erant repudiandae te cum, sumo moderatius sed ut. Cum choro semper an, eam commune omnesque recteque an, eos in regione mandamus referrentur. This is sentence 1.
Lorem ipsum dolor sit amet, at nullam laboramus vel, vix ei dicit pertinacia. Te fabulas tincidunt definitionem nec, commune assentior appellantur usu id. Ne mea nusquam docendi, ne eam oratio omittantur mediocritatem, est euismod adolescens no. In audire This is sentence 2 tritani vulputate est. Te maiorum perpetua pri, erant repudiandae te cum, sumo moderatius sed ut. Cum choro semper an, eam commune omnesque recteque an, eos in regione mandamus referrentur. This is sentence 3
</p>
</div>
<script type="text/javascript">
function highlightText(sentence){
var textBody=document.getElementById("textbody").innerHTML;
var bIndex = textBody.indexOf("<b>");
if(bIndex!=-1){
var sbIndex=textBody.indexOf("</b>");
textBody=textBody.substring(0, bIndex)+textBody.substring(bIndex+3, sbIndex)+textBody.substring(sbIndex+4);
}
var textIndex = textBody.indexOf(sentence);
if(textIndex!=-1){
document.getElementById("textbody").innerHTML=textBody.substring(0,textIndex)+"<b>"+sentence+"</b>"+textBody.substring(textIndex+sentence.length);
}
}
</script>
<div class="summary col-md-4">
<p>Summary</p>
<a href="#hh" onclick="highlightText(this.innerHTML); return false;">This is sentence 1</a>
<a href="#hh" onclick="highlightText(this.innerHTML); return false;">This is sentence 2</a>
<a href="#hh" onclick="highlightText(this.innerHTML); return false;">This is sentence 3</a>
</div>
<div class="col-md-1"></div>
</div>
<div class="row mc-container">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="mc-card">
<form class="card question">
<p class="card-header">Most of the cranial nerves arise from the ________.</p>
<div class="body">
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q1a1'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq1a1">A</div>
</div>
<input class="form-control" id="choice-wordq1a1" placeholder="cortex" readonly>
</div>
</button>
</div>
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q1a2'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq1a2">A</div>
</div>
<input class="form-control" id="choice-wordq1a2" placeholder="cortex" readonly>
</div>
</button>
</div>
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q1a3'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq1a3">A</div>
</div>
<input class="form-control" id="choice-wordq1a3" placeholder="cortex" readonly>
</div>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="row mc-container">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="mc-card">
<form class="card question">
<p class="card-header">Most of the cranial nerves arise from the ________.</p>
<div class="body">
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q2a1'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq2a1">A</div>
</div>
<input class="form-control" id="choice-wordq2a1" placeholder="cortex" readonly>
</div>
</button>
</div>
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q2a2'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq2a2">A</div>
</div>
<input class="form-control" id="choice-wordq2a2" placeholder="cortex" readonly>
</div>
</button>
</div>
<div class="row">
<div class="col-sm-2"></div>
<button class="btn btn-default col-sm-8 mc-choice" onclick="colorChange('q2a3'); return false">
<label class="sr-only" for="inlineFormInputGroup">Cortex</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="choiceq2a3">A</div>
</div>
<input class="form-control" id="choice-wordq2a3" placeholder="cortex" readonly>
</div>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
function colorChange(anum){
document.getElementById("choice"+anum).style.background="#00cc99";
document.getElementById("choice"+anum).style.color="white";
document.getElementById("choice-word"+anum).style.background="#00cc99";
document.getElementById("choice-word"+anum).style.color="white";
}
</script>
</body>
</html>