@ -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 >
Appiah Lawrence Opoku
AAAzsf