add new articles.

article/words31.json

@@ -0,0 +1 @@
+{"article":"act add age ago aid ail aim air all and ant any ape apt arc ark arm art ash ask awe awl bad bag ban bar bat bay bed bee beg bet bib bid big bin bit bob bog boo bow box boy bud bug bus but buy cab cad can cap car cat cob cog con cop cow coy cry cub cue cup cut dam day den dew die dig dim din dip dog don dot dry due dye ear eat ebb egg ego elf elm end era err eve ewe eye fad fag fan far fat fax fee fen"}

article/words32.json

@@ -0,0 +1 @@
+{"article":"few fig fin fir fit fix flu fly foe fog fop for fox fro fry fun fur gab gad gag gap gas gay gee gem get gig gin git gnu god gum gun gut guy gym hag ham hap hat haw hay hem hen her hew hey hie him hin hip his hit hod hoe hog hop hot how hub hue hug hum hut ice icy ilk ill imp ink inn ion ire irk its ivy jab jag jam jar jaw jay jet jew jib jig job joe jog jot joy jug jut kay keg ken key kid kin kip kit"}

article/words33.json

@@ -0,0 +1 @@
+{"article":"lab lad lag lap law lay lea lee leg let lid lie lip lit log lot low lug mad man map mar mat may mew mid mix mob mop mow mud mug nag nap nay net new nib nil nip nix nod nor not now nun nut oaf oak oar odd ode off ohm oil old one opt orb ore our out owe owl own pad pal pan pat paw pay pea peg pen per pet pie pig pin pit pod pop pot pry pub pun pus put rag ram rap rat raw ray red rib rid rig rim rip rob"}

article/words34.json

@@ -0,0 +1 @@
+{"article":"rod roe rot row rub rue rug run rye sad sag sap saw say sea see set sew sex she shy sin sip sir sit six ski sky sly sob sod son sop sow soy spa spy sue sum sun sup tag tan tap tar tax tea ten the tie tin tip toe ton too top tow toy try tub tug tun two use van vbe vet vex via vie vim vow wag wan war wax way web wed wet who why wig win wit woe woo wry yam yap yaw yea yen yep yes yet yew you zip zoo"}

article/words41.json

@@ -0,0 +1 @@
+{"article":"able ache acid acre ally also amid arch area army atom aunt auto away axis baby back bait bake bald ball band bang bank bare bark barn base bath beam bean bear beat beef beer bell belt bend best bias bike bill bind bird bite blow blue blur boat body boil bold bolt bomb bond bone book boom boot bore born boss both bowl brim brow bulb bulk bull bump burn bury bush busy cafe cage cake call calm camp cape card care cart case cash cast cave cell cent chap chat chef chew chin chip chop cite city clap claw clay clip"}

article/words42.json

@@ -0,0 +1 @@
+{"article":"club clue coal coat cock code coil coin coke cold comb come cook cool cope copy cord core corn cost cosy crab crew crop crow cube curb cure curl damn damp dare dark dash data date dawn dead deaf deal dean dear debt deck deed deem deep deer defy deny desk dial diet dine dirt disc dish dive dock doll dome doom door dorm dose dove down doze drag draw drip drop drug drum duck dull dumb dump dusk dust duty each earn ease east easy echo edge edit else emit envy etc. even ever evil exam exit face fact fade fail fair"}

article/words43.json

@@ -0,0 +1 @@
+{"article":"fake fall fame fare farm fast fate fear feat feed feel fell file fill film find fine fire firm fish fist five flag flap flat flaw flee flow foam fold folk fond food fool foot fore fork form foul four free frog from fuel full fume fund fuse fuss gage gain game gang gaol gasp gate gaze gear gene germ gift girl give glad glow glue goal goat gold golf good gown grab gray grey grim grin grip grow gulf hail hair half hall halt hand hang hard harm hate haul have hawk head heal heap hear heat heel heir hell help herb"}

article/words44.json

@@ -0,0 +1 @@
+{"article":"herd here hero hers hide high hike hill hint hire hold hole holy home hook hope horn hose host hour howl huge hunt hurl hurt i.e. idea idle inch into iron isle item jail jazz join joke jump junk jury just keen keep kick kill kilo kind king kiss kite knee knit knob knot know lace lack lady lake lamb lame lamp land lane lash last late lawn lazy lead leaf leak lean leap left lend lens less lest levy lick life lift like limb limp line link lion list live load loaf loan lock long look loom loop lord lose loss loud"}

article/words45.json

@@ -0,0 +1 @@
+{"article":"love luck lump lung lure maid mail main make male many mark mask mass mate meal mean meat meet melt memo mend menu mere mess mild mile milk mill mind mine miss mist moan mock mode mold mood moon more moss most move much must mute myth nail name navy near neat neck need nest news next nice nine none noon norm nose oath obey odds odor okay omit once only onto open oral ours oval oven over pace pack pact page pail pain pair pale palm pant park part pass past path pave peak pear peel peep peer pest pick pile pill"}

article/words46.json

@@ -0,0 +1 @@
+{"article":"pine pink pint pipe pity plan play plea plot plow plug plus poem poet poke pole poll pond pool poor pope pork port pose post pour pray prey puff pull pump pure push quit quiz race rack rage raid rail rain rake rank rape rare rash rate read real reap rear reed reel rein rely rent rest rice rich ride ring riot ripe rise risk road roar robe rock role roll roof room root rope rose ruby rude ruin rule rush rust sack safe sail sake sale salt same sand sane save scan scar seal seam seat seed seek seem self sell send"}

article/words47.json

@@ -0,0 +1 @@
+{"article":"sham shed ship shoe shop shot show shut sick side sigh sign silk sing sink site size skim skin skip slam slap slim slip slit slot slow slum smog snap snow soak soap soar sock soda sofa soft soil sole solo some song soon sore sort soul soup sour span spin spit spot spur stab star stay stem step stir stop stun such suck suit sure swan sway swim tail take tale talk tall tame tank tape task taxi team tear tell tend tent term test text than that them then they thin this thus tick tide tidy tile till tilt time tiny"}

article/words48.json

@@ -0,0 +1 @@
+{"article":"tire toll tomb tone tool toss tour town tram trap tray tree trim trip tube tuck tune turn twin type tyre ugly undo unit upon urge used vain vary vase vast veil vein verb very vest veto vice view visa void volt vote wage wait wake walk wall want ward warm warn wash watt wave weak wear weed week weep weld well west what when whip whom wide wife wild will wind wine wing wink wipe wire wise wish with wolf wood wool word work worm wrap yard yawn year yell your zeal zero zinc zone zoom"}

basic.html

@@ -70,6 +70,9 @@
                 <li class="nav-item active">
                     <a class="nav-link" href="#">指法训练</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="words.html">单词训练</a>
+                </li>
                 <!--<li class="nav-item dropdown">-->
                 <!--<a class="nav-link dropdown-toggle" href="https://www.forten.org" id="d01" data-toggle="dropdown"-->
                 <!--aria-haspopup="true" aria-expanded="false">打字训练</a>-->

index.html

@@ -28,6 +28,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="basic.html">指法训练</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="words.html">单词训练</a>
+                </li>
                 <!--<li class="nav-item dropdown">-->
                 <!--<a class="nav-link dropdown-toggle" href="https://www.forten.org" id="d01" data-toggle="dropdown"-->
                 <!--aria-haspopup="true" aria-expanded="false">打字训练</a>-->

words.html

@@ -0,0 +1,237 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>在线英文打字练习_提高打字速度_英文打字_打字指法_盲打训练_指法练习_英文打字指法_英文打字指法训练_打字指法练习</title>
+    <meta name="keywords" content="在线英文打字练习,提高打字速度,英文打字,打字指法,盲打训练,指法练习,英文打字指法,英文打字指法训练,打字指法练习">
+    <meta name="description" content="在线英文打字练习,提高英文打字速度,掌握盲打技巧,训练打字准确率,提高速度,掌握打字指法。">
+    <link rel="stylesheet" href="css/bootstrap.css"/>
+    <link rel="stylesheet" href="css/uikit.css"/>
+    <link rel="stylesheet" href="css/theme.css"/>
+    <style>
+        .cursor.blink {
+            animation: blink 1s infinite steps(1, start);
+        }
+
+        @keyframes blink {
+            0%, 100% {
+                background-color: #fff;
+                color: #999;
+            }
+            50% {
+                background-color: #000;
+                color: #999;
+            }
+        }
+
+        #input-div {
+            border: 1px solid #999;
+            border-radius: 5px;
+            box-shadow: 2px 2px 5px 1px #eee inset,
+            -2px -2px 5px 1px #eee inset;
+        }
+
+        #input-div > span {
+            display: inline-block;
+            font-size: 2em;
+            font-family: Consolas;
+        }
+
+        .init {
+            color: #999;
+        }
+
+        .correct {
+            color: black;
+        }
+
+        .errors {
+            box-shadow: 2px 2px 5px 1px #f00 inset,
+            -2px -2px 5px 1px #f00 inset;
+        }
+    </style>
+</head>
+<body>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container">
+        <a class="navbar-brand" href="https://www.forten.org" target="_blank" title="更多精彩请关注唯实讲堂">ForTen.org</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb"
+                aria-controls="nb" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="nb">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="index.html">首页 <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="basic.html">指法训练</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">单词训练</a>
+                </li>
+                <!--<li class="nav-item dropdown">-->
+                <!--<a class="nav-link dropdown-toggle" href="https://www.forten.org" id="d01" data-toggle="dropdown"-->
+                <!--aria-haspopup="true" aria-expanded="false">打字训练</a>-->
+                <!--<div class="dropdown-menu" aria-labelledby="d01">-->
+                <!--<a class="dropdown-item" href="#">初级指法</a>-->
+                <!--<a class="dropdown-item" href="#">中级实践</a>-->
+                <!--<a class="dropdown-item" href="#">高级挑战</a>-->
+                <!--<a class="dropdown-item" href="#">专业方向</a>-->
+                <!--</div>-->
+                <!--</li>-->
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="uk-padding-large uk-background-top-left uk-background-fixed uk-background-cover"
+     style="background-image: url(./imgs/bg002.jpg);">
+    <div class="container">
+        <p class="display-4 text-light">训练要点即<span class="display-1">坚持！</span></p>
+        <p class="display-4 text-light">建议<span class="display-1">每天训练</span>30到45分钟！</p>
+    </div>
+</div>
+<div id="main" class="uk-section container">
+    <div class="uk-container">
+        <div class="h4 uk-width-2-3 uk-align-right">第一次敲击开始计算打字速度 {{speed}} 字/分钟 错误：{{errorTimes}} 次</div>
+        <div class="btn-group uk-width-1-4">
+            <button class="btn btn-primary">三字母单词</button>
+            <div uk-dropdown="pos: bottom-justify">
+                <ul class="uk-nav uk-dropdown-nav">
+                    <li><a href="#" @click="loadArticle('words31.json');">第一部分</a></li>
+                    <li><a href="#" @click="loadArticle('words32.json');">第二部分</a></li>
+                    <li><a href="#" @click="loadArticle('words33.json');">第三部分</a></li>
+                    <li><a href="#" @click="loadArticle('words34.json');">第四部分</a></li>
+                </ul>
+            </div>
+            <button class="btn btn-primary">四字母单词</button>
+            <div uk-dropdown="pos: bottom-justify">
+                <ul class="uk-nav uk-dropdown-nav">
+                    <li><a href="#" @click="loadArticle('words41.json');">第一部分</a></li>
+                    <li><a href="#" @click="loadArticle('words42.json');">第二部分</a></li>
+                    <li><a href="#" @click="loadArticle('words43.json');">第三部分</a></li>
+                    <li><a href="#" @click="loadArticle('words44.json');">第四部分</a></li>
+                    <li><a href="#" @click="loadArticle('words45.json');">第五部分</a></li>
+                    <li><a href="#" @click="loadArticle('words46.json');">第六部分</a></li>
+                    <li><a href="#" @click="loadArticle('words47.json');">第七部分</a></li>
+                    <li><a href="#" @click="loadArticle('words48.json');">第八部分</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div id="input-div" class="uk-margin uk-padding" v-html="article"></div>
+</div>
+<a href="https://www.forten.org" target="_blank">
+    <div class="navbar navbar-nav navbar-dark bg-dark uk-text-center text-light"
+         title="在线英文打字练习,提高打字速度,英文打字,打字指法,盲打训练,指法练习,英文打字指法,英文打字指法训练,打字指法练习">
+        <div class="uk-grid uk-padding-large">
+            <figure class="uk-width-1-2">
+                <img src="imgs/forten.png" alt="https://www.ForTen.org"/>
+                <figcaption>&copy; ForTen.org</figcaption>
+            </figure>
+            <figure class="uk-width-1-2">
+                <img src="imgs/wx.png" alt="唯实讲堂微信订阅号"/>
+                <figcaption>微信订阅号</figcaption>
+            </figure>
+        </div>
+    </div>
+</a>
+<script src="js/popper.min.js"></script>
+<script src="js/jquery-3.2.1.js"></script>
+<script src="js/vue.js"></script>
+<script src="js/axios.js"></script>
+<script src="js/bootstrap.js"></script>
+<script src="js/uikit.js"></script>
+<script src="js/uikit-icons.js"></script>
+<script src="js/basic.js"></script>
+<script>
+    var vm = new Vue({
+        el: '#main',
+        data: {
+            started: false,
+            speed: 0,
+            types: 0,
+            errorTimes: 0,
+            begin: '',
+            article: '',
+            letterArray: [],
+            spanArray: []
+        },
+        created: function () {
+            this.loadArticle('words31.json');
+        },
+        methods: {
+            loadArticle: function (name) {
+                this.article = '';
+                axios({
+                    url: 'article/' + name
+                }).then((res) => {
+                    this.started = false;
+                    this.speed = 0;
+                    this.types = 0;
+                    this.errorTimes = 0;
+                    this.letterArray = res.data.article.split('');
+                    this.spanArray = $.map(this.letterArray, function (value) {
+                        if (value == ' ') {
+                            return '<span class="init">&nbsp;</span>';
+                        } else {
+                            return '<span class="init">' + value + '</span>';
+                        }
+                    });
+                    this.spanArray[0] = this.spanArray[0].replace('init', 'init cursor blink');
+                    this.article = this.spanArray.join('');
+                });
+            }
+        }
+    });
+
+    var exKeyCode = [8, 9, 12, 13, 16, 17, 18, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123]
+    var typeLetter = function (event) {
+        if (!vm.started) {
+            vm.started = true;
+            vm.begin = new Date().getTime();
+        }
+        var currSpan = $('.cursor.blink');
+        var nextSpan = currSpan.next('span').first();
+        var source = currSpan.html();
+        var type = event.key;
+        if (event.keyCode == 32) {
+            type = '&nbsp;';
+        }
+        if (event.keyCode == 190 && event.shiftKey) {
+            type = '&gt;';
+        }
+        if (event.keyCode == 188 && event.shiftKey) {
+            type = '&lt;';
+        }
+
+        if (source == type) {
+            currSpan.removeClass('cursor').removeClass('blink').removeClass('init').removeClass('error').addClass('correct');
+            nextSpan.addClass('cursor').addClass('blink');
+            ++vm.types;
+            var useTime = new Date().getTime() - vm.begin;
+            if (vm.types > 3)
+                vm.speed = Math.ceil((vm.types * 60) / (useTime / 1000));
+        } else {
+            if (exKeyCode.indexOf(event.keyCode) == -1) {
+                ++vm.errorTimes;
+            }
+        }
+        if (vm.types == vm.spanArray.length) {
+            $('#input-div>span').last().removeClass('cursor').removeClass('blink');
+            $('#input-div>span').removeClass('correct').addClass('init');
+            $('#input-div>span').first().addClass('cursor').addClass('blink');
+            vm.types = 0;
+            vm.begin = new Date().getTime();
+        }
+    };
+
+    $(function () {
+        $('html').on('keydown', typeLetter);
+    });
+</script>
+</body>
+</html>