-
Notifications
You must be signed in to change notification settings - Fork 2
/
essay_sen_len_checker.html
181 lines (159 loc) · 5.09 KB
/
essay_sen_len_checker.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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Essay Sentence Length Checker</title>
<style>
body, textarea {
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif !important;
}
a, span, textarea, div {
word-break: break-all;
}
.container {
width: 80%;
max-width: 1200px;
margin: 32px auto;
}
#input {
width: 100%;
height: 160px;
resize: vertical;
line-height: 20px;
}
#input-max-cnt {
width: 32px;
}
#output {
line-height: 32px;
}
#output .warn {
background: #D1C4E9;
}
#output .error {
background: #F8BBD0;
}
.hint-text {
color: #999;
font-size: 14px;
}
.author {
font-size: 14px;
color: #999;
}
.hide-on-mobile {
display: none;
}
@media(min-width: 600px) {
.show-on-mobile {
display: none;
}
.hide-on-mobile {
display: block;
}
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>Essay Sentence Length Checker</h2>
<p class="author">Author: Chen Jingyi (WeChat: fzyzcjy, StuId: 117010016)</p>
<br>
</div>
<div class="show-on-mobile">
<p>
<span>You can also visit it on your computer.</span>
<span class="hint-text">
Copy this website url 【<a id="cur-url"></a>】, and use WeChat's "File Transfer Helper" to send it to your computer.
</span>
</p>
<br><br>
</div>
<div>
<p class="hint-text">Paste your essay here:</p>
<textarea id="input">I think it's really hard to write short sentences. So I developed this to help you check it. Hope this tool can help you!
Please paste your essay here. This tool will automatically check whether your sentences are longer than nine words. For example, this sentence consists of 8 words. And this sentence is too long because it has 11 words. The number before it indicates the number of words.</textarea>
<p class="hint-text">How many words are you allowed to use at most? <input id="input-max-cnt" type="number" value="9"/></p>
<br><br>
<p class="hint-text">Here is the result:</p>
<div><p id="output"></p></div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
// helpers
function throttle(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function () {
previous = options.leading === false ? 0 : Date.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function () {
var now = Date.now();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
</script>
<script>
var WARN_OR_ERR_THROTTLE = 2;
var render = throttle(function(e) {
var $output = $("#output");
$output.children().remove();
var text = $("#input").val();
var sentenceArr =
text.replace(/\./gi, ".*")
.replace(/!/gi, "!*")
.replace(/\?/gi, "?*")
.replace(/"/gi, "\"*")
.replace(/\n/gi, "\n*")
.split(/\*/);
// console.log(sentenceArr);
var warnWordCnt = $("#input-max-cnt").val();
for(var i = 0;i<sentenceArr.length; ++i) {
var sen = sentenceArr[i];
sen = sen.replace('\n', '<br>');
var wordCnt = sen.trim().split(" ").length;
var $el = $("<span class='sen'></span>");
if(wordCnt > warnWordCnt) {
var cls = (wordCnt-warnWordCnt<=WARN_OR_ERR_THROTTLE)?'warn':'error';
$el.html(' <span class="'+cls+'"><b>[' + wordCnt + ']</b> ' + sen + "</span>");
} else {
$el.html(sen);
}
$el.appendTo($output);
}
}, 100);
$(function() {
$("#input").on('keyup', render);
$("#input-max-cnt").click(render);
render();
$("#cur-url")
.text(location.href)
.attr('href', location.href);
});
</script>
</body>
</html>