WordNote/main.html at master · teijeong/WordNote · GitHub

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
<html ng-app="WordNote">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>WordNote</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.min.css" rel="stylesheet" />
    <link href="css/jquery-ui.structure.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>WordNote</h1>
        <div id="drop-zone" class="row">
            <div class="col-sm-9">
                <textarea rows="10" id="list"></textarea>
            </div>
            <div id="files" class="col-sm-3">
                <div id="file-list"></div>
                <input type="file" id="inputfile">
            </div>
        </div>
        <div class="row options">
            <div class="col-md-3">
                <div id="general" class="panel panel-default">
                    <div class="panel-heading">전체 설정</div>
                    <div class="panel-body">
                        <form class="from-horizontal">
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                        단어, 뜻 바꾸기<input type="checkbox" id="reverse">
                                    </label><br />
                                    <label>
                                        순서 섞기<input type="checkbox" id="shuffle">
                                    </label><br />
                                    <label>
                                        단어 읽어주기<input type="checkbox" id="tts">
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="subjective" class="panel panel-default">
                    <div class="panel-heading">객관식 테스트 설정</div>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="option-count" class="col-sm-8 control-label option-label">보기 개수</label>
                                <div class="col-sm-4">
                                    <input type="text" id="option-count" class="form-control" value="8"/>
                                </div>
                            </div>
                        </form>
                        <button class="btn btn-default test-start" onclick="location.href='subjective.html'">객관식 테스트</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="objective" class="panel panel-default">
                    <div class="panel-heading">주관식 테스트 설정</div>
                        <div class="panel-body">
                        <button class="btn btn-default test-start" onclick="location.href='objective.html'">주관식 테스트</button>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="flashcards" class="panel panel-default">
                    <div class="panel-heading">암기놀이 설정</div>
                    <div class="panel-body">
                        <form class="from-horizontal">
                            <div class="form-group">
                                <div class="checkbox">
                                    <label>
                                         뜻 처음부터 보이기<input type="checkbox" id="flip">
                                    </label>
                                </div>
                            </div>
                        </form>
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="option-count" class="col-sm-8 control-label option-label">자동 넘기기</label>
                                <div class="col-sm-4">
                                    <input type="text" id="autoplay" class="form-control" value="0"/>
                                </div>
                            </div>
                        </form>

                        <button class="btn btn-default test-start" onclick="location.href='flashcard.html'">암기놀이</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class=" pull-right btn btn-default" data-toggle="modal" data-target="#instruction">사용법</button>
    </div>
    <div class="modal fade" id="instruction" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">사용법</h4>
                </div>
                <div class="modal-body">
                    <ol>
                        <li>단어장 텍스트 파일을 드래그&드롭 하거나 파일 선택 버튼을 눌러 직접 불러옵니다.<br>단어장 파일은 아래와 같은 형식입니다.
                            <p><pre><samp>apple<br>사과
banana<br>바나나
cinnamon<br>계피

...

<em>[단어]<br>[뜻]</em></samp></pre></p>
                        </li>
                        <li>원하는 설정을 한 후에, 원하는 테스트를 진행하면 됩니다.</li>
                    </ol>
                    <ul>
                        <li>단어 읽어주기의 경우 현재 영단어의 원형만 가능하며, Merriam-Webster online dictionary의 API 를 사용합니다.</li>
                    </ul>
                    <address>
                    Contact info: <strong>Taehee Jeong</strong> &lt;wwee3631 at gmail.com&gt;
                    </address>
                </div>
                <div class="modal-footer">
                    <button type="button" class="pull-right btn btn-default" data-dismiss="modal">닫기</button>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/wordnote.js"></script>
    <script src="js/main.js"></script>
</body>
</html>