forked from mrlan/EnglishPal
Compare commits
6 Commits
master
...
Bug407-Jin
| Author | SHA1 | Date |
|---|---|---|
 Appiah Lawrence Opoku
|
46000f3959 | |
|
Appiah Lawrence Opoku
|
9d9590328d | |
|
Appiah Lawrence Opoku
|
dabeb0d2a9 | |
|
Appiah Lawrence Opoku
|
4dc2c9c591 | |
AAAzsf
|
72e23f4e13 | |
|
AAAzsf
|
5a62204864 |
|
|
@ -1,68 +1,40 @@
|
|||
let isRead = true;
|
||||
let isChoose = true;
|
||||
let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
|
||||
let current_position = 0; // 朗读文本的当前位置
|
||||
let original_position = 0; // 朗读文本的初始位置
|
||||
let to_speak = ""; // 朗读的初始内容
|
||||
|
||||
var isRead = true;
|
||||
var isChoose = true;
|
||||
const reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停
|
||||
//获取字符
|
||||
function getWord() {
|
||||
return window.getSelection ? window.getSelection() : document.selection.createRange().text;
|
||||
return window.getSelection
|
||||
? window.getSelection()
|
||||
: document.selection.createRange().text;
|
||||
}
|
||||
|
||||
function fillInWord() {
|
||||
//填充字符
|
||||
function fillingWord() {
|
||||
let word = getWord();
|
||||
if (isRead) read(word);
|
||||
if (!isChoose) return;
|
||||
const element = document.getElementById("selected-words");
|
||||
let element = document.getElementById("selected-words");
|
||||
element.value = element.value + " " + word;
|
||||
}
|
||||
|
||||
document.getElementById("text-content").addEventListener("click", fillInWord, false);
|
||||
|
||||
function makeUtterance(str, rate) {
|
||||
let msg = new SpeechSynthesisUtterance(str);
|
||||
msg.rate = rate;
|
||||
msg.lang = "en-US"; // TODO: add language options menu
|
||||
msg.onboundary = ev => {
|
||||
if (ev.name == "word") {
|
||||
current_position = ev.charIndex;
|
||||
}
|
||||
}
|
||||
return msg;
|
||||
}
|
||||
|
||||
const sliderValue = document.getElementById("rangeValue"); // 显示值
|
||||
const inputSlider = document.getElementById("rangeComponent"); // 滑块元素
|
||||
inputSlider.oninput = () => {
|
||||
let value = inputSlider.value; // 获取滑块的值
|
||||
sliderValue.textContent = value + '×';
|
||||
if (!reader.speaking) return;
|
||||
document
|
||||
.getElementById("text-content")
|
||||
.addEventListener("click", fillingWord, false);
|
||||
//朗读单词
|
||||
//@word 要朗读的单词
|
||||
function read(word) {
|
||||
//关闭当前正在读的单词
|
||||
reader.cancel();
|
||||
let msg = makeUtterance(to_speak.substring(original_position + current_position), value);
|
||||
original_position = original_position + current_position;
|
||||
current_position = 0;
|
||||
reader.speak(msg);
|
||||
};
|
||||
|
||||
function read(s) {
|
||||
to_speak = s.toString();
|
||||
original_position = 0;
|
||||
current_position = 0;
|
||||
let msg = makeUtterance(to_speak, inputSlider.value);
|
||||
//创建新的朗读任务
|
||||
let msg = new SpeechSynthesisUtterance(word);
|
||||
reader.speak(msg);
|
||||
}
|
||||
|
||||
//关闭正在读的单词
|
||||
function onReadClick() {
|
||||
isRead = !isRead;
|
||||
let isRead = !isRead;
|
||||
if (!isRead) {
|
||||
reader.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
//取消当前选择
|
||||
function onChooseClick() {
|
||||
isChoose = !isChoose;
|
||||
}
|
||||
|
||||
function stopRead() {
|
||||
reader.cancel();
|
||||
}
|
||||
|
|
@ -1,22 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
|
||||
<meta name="format-detection" content="telephone=no"/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"
|
||||
/>
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
|
||||
{{ yml['header'] | safe }}
|
||||
{% if yml['css']['item'] %}
|
||||
{% for css in yml['css']['item'] %}
|
||||
<link href="{{ css }}" rel="stylesheet">
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if yml['js']['head'] %}
|
||||
{% for js in yml['js']['head'] %}
|
||||
{{ yml['header'] | safe }} {% if yml['css']['item'] %} {% for css in
|
||||
yml['css']['item'] %}
|
||||
<link href="{{ css }}" rel="stylesheet" />
|
||||
{% endfor %} {% endif %} {% if yml['js']['head'] %} {% for js in
|
||||
yml['js']['head'] %}
|
||||
<script src="{{ js }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %} {% endif %}
|
||||
|
||||
<title>EnglishPal Study Room for {{ username }}</title>
|
||||
|
||||
|
|
@ -26,42 +24,122 @@
|
|||
}
|
||||
|
||||
@keyframes shakes {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 50% { transform: translate3d(+2px, 0, 0); }
|
||||
30%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(+4px, 0, 0); }
|
||||
50% { transform: translate3d(-4px, 0, 0); }
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
20%,
|
||||
50% {
|
||||
transform: translate3d(+2px, 0, 0);
|
||||
}
|
||||
30%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(+4px, 0, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<p>
|
||||
<b
|
||||
>English Pal for
|
||||
<font id="username" color="red">{{ username }}</font></b
|
||||
>
|
||||
|
||||
{% if username == admin_name %}
|
||||
<a class="btn btn-secondary" href="/admin" role="button" onclick="stopRead()">管理</a>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
href="/admin"
|
||||
role="button"
|
||||
onclick="stopRead()"
|
||||
>管理</a
|
||||
>
|
||||
{% endif %}
|
||||
<a id="quit" class="btn btn-secondary" href="/logout" role="button" onclick="stopRead()">退出</a>
|
||||
<a class="btn btn-secondary" href="/reset" role="button" onclick="stopRead()">重设密码</a>
|
||||
|
||||
<a
|
||||
id="quit"
|
||||
class="btn btn-secondary"
|
||||
href="/logout"
|
||||
role="button"
|
||||
onclick="stopRead()"
|
||||
>退出</a
|
||||
>
|
||||
<a
|
||||
class="btn btn-secondary"
|
||||
href="/reset"
|
||||
role="button"
|
||||
onclick="stopRead()"
|
||||
>重设密码</a
|
||||
>
|
||||
</p>
|
||||
{# {% for message in flashed_messages %}#} {# 根据user_service.userpage,取消了参数flashed_messages，因此注释了这段代码 #}
|
||||
{# <div class="alert alert-warning" role="alert">Congratulations! {{ message }}</div>#}
|
||||
{# {% endfor %}#}
|
||||
{# {% for message in flashed_messages %}#} {#
|
||||
根据user_service.userpage,取消了参数flashed_messages，因此注释了这段代码
|
||||
#} {#
|
||||
<div class="alert alert-warning" role="alert">
|
||||
Congratulations! {{ message }}
|
||||
</div>
|
||||
#} {# {% endfor %}#}
|
||||
|
||||
<button class="btn btn-success" id="load_next_article" onclick="load_next_article()"> 下一篇 Next Article </button>
|
||||
<button class="btn btn-success" id="load_pre_article" onclick="load_pre_article()" > 上一篇 Previous Article </button>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
id="load_next_article"
|
||||
onclick="load_next_article()"
|
||||
>
|
||||
下一篇 Next Article
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
id="load_pre_article"
|
||||
onclick="load_pre_article()"
|
||||
>
|
||||
上一篇 Previous Article
|
||||
</button>
|
||||
|
||||
<p><b>阅读文章并回答问题</b></p>
|
||||
<div id="text-content">
|
||||
<div id="found">
|
||||
<div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success" id="user-level">{{ today_article["user_level"] }}</span> and we have chosen an article with a difficulty level of <span class="badge bg-success" id="text_level">{{ today_article["text_level"] }}</span> for you.</div>
|
||||
<p class="text-muted" id="date">Article added on: {{ today_article["date"] }}</p><br/>
|
||||
<div class="p-3 mb-2 bg-light text-dark"><br/>
|
||||
<p class="display-5" id="article_title">{{ today_article["article_title"] }}</p><br/>
|
||||
<p class="lead"><font id="article" size=2>{{ today_article["article_body"] }}</font></p><br/>
|
||||
<p><small class="text-muted" id="source">{{ today_article['source'] }}</small></p><br/>
|
||||
<p><b id="question">{{ today_article['question'] }}</b></p><br/>
|
||||
<div class="alert alert-success" role="alert">
|
||||
According to your word list, your level is
|
||||
<span class="badge bg-success" id="user-level"
|
||||
>{{ today_article["user_level"] }}</span
|
||||
>
|
||||
and we have chosen an article with a difficulty level of
|
||||
<span class="badge bg-success" id="text_level"
|
||||
>{{ today_article["text_level"] }}</span
|
||||
>
|
||||
for you.
|
||||
</div>
|
||||
<p class="text-muted" id="date">
|
||||
Article added on: {{ today_article["date"] }}
|
||||
</p>
|
||||
<br />
|
||||
<div class="p-3 mb-2 bg-light text-dark">
|
||||
<br />
|
||||
<p class="display-5" id="article_title">
|
||||
{{ today_article["article_title"] }}
|
||||
</p>
|
||||
<br />
|
||||
<p class="lead">
|
||||
<font id="article" size="2"
|
||||
>{{ today_article["article_body"] }}</font
|
||||
>
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
<small class="text-muted" id="source"
|
||||
>{{ today_article['source'] }}</small
|
||||
>
|
||||
</p>
|
||||
<br />
|
||||
<p><b id="question">{{ today_article['question'] }}</b></p>
|
||||
<br />
|
||||
<script type="text/javascript">
|
||||
function toggle_visibility(id) { {# https://css-tricks.com/snippets/javascript/showhide-element/#}
|
||||
const e = document.getElementById(id);
|
||||
|
|
@ -72,33 +150,66 @@
|
|||
}
|
||||
</script>
|
||||
<button onclick="toggle_visibility('answer');">ANSWER</button>
|
||||
<div id="answer" style="display:none;">{{ today_article['answer'] }}</div><br/>
|
||||
<div id="answer" style="display: none">
|
||||
{{ today_article['answer'] }}
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert" id="not_found" style="display:none;">
|
||||
<p class="text-muted"><span class="badge bg-success">Notes:</span><br>No article is currently available for you. You can try again a few times or mark new words in the passage to improve your level.</p>
|
||||
<div
|
||||
class="alert alert-success"
|
||||
role="alert"
|
||||
id="not_found"
|
||||
style="display: none"
|
||||
>
|
||||
<p class="text-muted">
|
||||
<span class="badge bg-success">Notes:</span><br />No article is
|
||||
currently available for you. You can try again a few times or mark
|
||||
new words in the passage to improve your level.
|
||||
</p>
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert" id="read_all" style="display:none;">
|
||||
<p class="text-muted"><span class="badge bg-success">Notes:</span><br>You've read all the articles.</p>
|
||||
<div
|
||||
class="alert alert-success"
|
||||
role="alert"
|
||||
id="read_all"
|
||||
style="display: none"
|
||||
>
|
||||
<p class="text-muted">
|
||||
<span class="badge bg-success">Notes:</span><br />You've read all
|
||||
the articles.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" onclick="toggleHighlighting()" checked/>生词高亮
|
||||
<input type="checkbox" onclick="onReadClick()" checked/>大声朗读
|
||||
<input type="checkbox" onclick="onChooseClick()" checked/>划词入库
|
||||
<input type="checkbox" onclick="toggleHighlighting()" checked />生词高亮
|
||||
<input type="checkbox" onclick="onReadClick()" checked />大声朗读
|
||||
<input type="checkbox" onclick="onChooseClick()" checked />划词入库
|
||||
<div class="range">
|
||||
<div class="field">
|
||||
<div class="sliderValue">
|
||||
<span id="rangeValue">1×</span>
|
||||
</div>
|
||||
<input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25"/>
|
||||
<input
|
||||
type="range"
|
||||
id="rangeComponent"
|
||||
min="0.5"
|
||||
max="2"
|
||||
value="1"
|
||||
step="0.25"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
|
||||
<form method="post" action="/{{ username }}/userpage">
|
||||
<textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>
|
||||
<input type="submit" value="把生词加入我的生词库"/>
|
||||
<input type="reset" value="清除"/>
|
||||
<textarea
|
||||
name="content"
|
||||
id="selected-words"
|
||||
rows="10"
|
||||
cols="120"
|
||||
></textarea
|
||||
><br />
|
||||
<input type="submit" value="把生词加入我的生词库" />
|
||||
<input type="reset" value="清除" />
|
||||
</form>
|
||||
{% if session.get['thisWord'] %}
|
||||
<script type="text/javascript">
|
||||
|
|
@ -107,111 +218,130 @@
|
|||
var element = document.getElementsByName("aaa");
|
||||
if (element != null)
|
||||
document.getElementsByName("aaa")[0].scrollIntoView(true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if d_len > 0 %}
|
||||
{% endif %} {% if d_len > 0 %}
|
||||
<p>
|
||||
<b>我的生词簿</b>
|
||||
<label for="move_dynamiclly">
|
||||
<input type="checkbox" name="move_dynamiclly" id="move_dynamiclly" checked>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="move_dynamiclly"
|
||||
id="move_dynamiclly"
|
||||
checked
|
||||
/>
|
||||
允许动态调整顺序
|
||||
</label>
|
||||
</p>
|
||||
<a name="aaa"></a>
|
||||
<div class="word-container">
|
||||
{% for x in lst3 %}
|
||||
{% set word = x[0] %}
|
||||
{% set freq = x[1] %}
|
||||
{% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
|
||||
{% endif %}
|
||||
<p id='p_{{ word }}' class="new-word" >
|
||||
<a id="word_{{ word }}" class="btn btn-light" href='http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index'
|
||||
role="button">{{ word }}</a>
|
||||
{% for x in lst3 %} {% set word = x[0] %} {% set freq = x[1] %} {% if
|
||||
session.get('thisWord') == x[0] and session.get('time') == 1 %} {% endif
|
||||
%}
|
||||
<p id="p_{{ word }}" class="new-word">
|
||||
<a
|
||||
id="word_{{ word }}"
|
||||
class="btn btn-light"
|
||||
href="http://youdao.com/w/eng/{{ word }}/#keyfrom=dict2.index"
|
||||
role="button"
|
||||
>{{ word }}</a
|
||||
>
|
||||
( <a id="freq_{{ word }}" title="{{ word }}">{{ freq }}</a> )
|
||||
<a class="btn btn-success" onclick="familiar('{{ word }}')" role="button">熟悉</a>
|
||||
<a class="btn btn-warning" onclick="unfamiliar('{{ word }}')" role="button">不熟悉</a>
|
||||
<a class="btn btn-danger" onclick="delete_word('{{ word }}')" role="button">删除</a>
|
||||
<a
|
||||
class="btn btn-success"
|
||||
onclick="familiar('{{ word }}')"
|
||||
role="button"
|
||||
>熟悉</a
|
||||
>
|
||||
<a
|
||||
class="btn btn-warning"
|
||||
onclick="unfamiliar('{{ word }}')"
|
||||
role="button"
|
||||
>不熟悉</a
|
||||
>
|
||||
<a
|
||||
class="btn btn-danger"
|
||||
onclick="delete_word('{{ word }}')"
|
||||
role="button"
|
||||
>删除</a
|
||||
>
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<input id="selected-words2" type="hidden" value="{{ words }}">
|
||||
<input id="selected-words2" type="hidden" value="{{ words }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
{{ yml['footer'] | safe }}
|
||||
{% if yml['js']['bottom'] %}
|
||||
{% for js in yml['js']['bottom'] %}
|
||||
</div>
|
||||
{{ yml['footer'] | safe }} {% if yml['js']['bottom'] %} {% for js in
|
||||
yml['js']['bottom'] %}
|
||||
<script src="{{ js }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<script type="text/javascript">
|
||||
function load_next_article(){
|
||||
{% endfor %} {% endif %}
|
||||
<script type="text/javascript">
|
||||
function load_next_article() {
|
||||
$.ajax({
|
||||
url: '/get_next_article/{{username}}',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
url: "/get_next_article/{{username}}",
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
// 更新页面内容
|
||||
if(data['today_article']){
|
||||
update(data['today_article']);
|
||||
check_pre(data['visited_articles']);
|
||||
check_next(data['result_of_generate_article']);
|
||||
}
|
||||
if (data["today_article"]) {
|
||||
update(data["today_article"]);
|
||||
check_pre(data["visited_articles"]);
|
||||
check_next(data["result_of_generate_article"]);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function load_pre_article(){
|
||||
function load_pre_article() {
|
||||
$.ajax({
|
||||
url: '/get_pre_article/{{username}}',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
url: "/get_pre_article/{{username}}",
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
// 更新页面内容
|
||||
if(data['today_article']){
|
||||
update(data['today_article']);
|
||||
check_pre(data['visited_articles']);
|
||||
}
|
||||
if (data["today_article"]) {
|
||||
update(data["today_article"]);
|
||||
check_pre(data["visited_articles"]);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function update(today_article){
|
||||
$('#user-level').html(today_article['user_level']);
|
||||
$('#text_level').html(today_article["text_level"]);
|
||||
$('#date').html('Article added on: '+today_article["date"]);
|
||||
$('#article_title').html(today_article["article_title"]);
|
||||
$('#article').html(today_article["article_body"]);
|
||||
$('#source').html(today_article['source']);
|
||||
$('#question').html(today_article["question"]);
|
||||
$('#answer').html(today_article["answer"]);
|
||||
function update(today_article) {
|
||||
$("#user-level").html(today_article["user_level"]);
|
||||
$("#text_level").html(today_article["text_level"]);
|
||||
$("#date").html("Article added on: " + today_article["date"]);
|
||||
$("#article_title").html(today_article["article_title"]);
|
||||
$("#article").html(today_article["article_body"]);
|
||||
$("#source").html(today_article["source"]);
|
||||
$("#question").html(today_article["question"]);
|
||||
$("#answer").html(today_article["answer"]);
|
||||
}
|
||||
<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
|
||||
function check_pre(visited_articles){
|
||||
if((visited_articles=='')||(visited_articles['index']<=0)){
|
||||
$('#load_pre_article').hide();
|
||||
}else{
|
||||
$('#load_pre_article').show();
|
||||
<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
|
||||
function check_pre(visited_articles) {
|
||||
if (visited_articles == "" || visited_articles["index"] <= 0) {
|
||||
$("#load_pre_article").hide();
|
||||
} else {
|
||||
$("#load_pre_article").show();
|
||||
}
|
||||
}
|
||||
function check_next(result_of_generate_article){
|
||||
if(result_of_generate_article == "found"){
|
||||
$('#found').show();$('#not_found').hide();
|
||||
$('#read_all').hide();
|
||||
}else if(result_of_generate_article == "not found"){
|
||||
$('#found').hide();
|
||||
$('#not_found').show();
|
||||
$('#read_all').hide();
|
||||
}else{
|
||||
$('#found').hide();
|
||||
$('#not_found').hide();
|
||||
$('#read_all').show();
|
||||
function check_next(result_of_generate_article) {
|
||||
if (result_of_generate_article == "found") {
|
||||
$("#found").show();
|
||||
$("#not_found").hide();
|
||||
$("#read_all").hide();
|
||||
} else if (result_of_generate_article == "not found") {
|
||||
$("#found").hide();
|
||||
$("#not_found").show();
|
||||
$("#read_all").hide();
|
||||
} else {
|
||||
$("#found").hide();
|
||||
$("#not_found").hide();
|
||||
$("#read_all").show();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
</script>
|
||||
</body>
|
||||
<style>
|
||||
mark {
|
||||
color: #{{ yml['highlight']['color'] }};
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue