@ -3,7 +3,7 @@
< 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"/>
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" / >
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel = "stylesheet" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" >
@ -25,34 +25,34 @@
< title > EnglishPal Study Room for {{ username }}< / title >
< style >
.shaking {
animation: shakes 1600ms ease-in-out;
}
.shaking {
animation: shakes 1600ms ease-in-out;
}
@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); }
}
@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); }
}
.lead{
font-size: 22px;
font-family: Helvetica, sans-serif;
white-space: pre-wrap;
}
.lead{
font-size: 22px;
font-family: Helvetica, sans-serif;
white-space: pre-wrap;
}
.arrow {
padding: 0;
font-size: 20px;
line-height: 21px;
display: inline-block;
}
.arrow {
padding: 0;
font-size: 20px;
line-height: 21px;
display: inline-block;
}
.arrow:hover {
cursor: pointer;
}
.arrow:hover {
cursor: pointer;
}
< / style >
< / head >
@ -69,32 +69,43 @@
< / p >
{% for message in get_flashed_messages() %}
< div class = "alert alert-warning alert-dismissible fade show" role = "alert" >
{{ message }}
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button >
{{ message }}
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" aria-label = "Close" > < / button >
< / div >
{% endfor %}
< div class = "pagination" >
< button class = "arrow" id = "load_pre_article" onclick = "load_pre_article();Reader.stopRead()" title = "Previous Article" >
< button class = "arrow" id = "load_pre_article" onclick = "load_pre_article();Reader.stopRead()" title = "Previous Article" >
< i class = "fas fa-chevron-left" > < / i > 上一篇
< / button >
< button class = "arrow" id = "load_next_article" onclick = "load_next_article();Reader.stopRead()" title = "Next Article" >
下一篇 < i class = "fas fa-chevron-right" > < / i >
< / button >
< / button >
< button class = "arrow" id = "load_next_article" onclick = "load_next_article();Reader.stopRead()" title = "Next Article" >
下一篇 < i class = "fas fa-chevron-right" > < / i >
< / button >
< / div >
< 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 = "text-decoration-underline" id = "user_level" > {{ today_article["user_level"] }}< / span > and we have chosen an article with a difficulty level of < span class = "text-decoration-underline" id = "text_level" > {{ today_article["text_level"] }}< / span > for you. The Oxford word coverage is < span class = "text-decoration-underline" id = "ratio" > {{ (today_article["ratio"] * 100) | int }}%.< / span > < / div >
< p class = "text-muted" id = "date" > Article added on: {{ today_article["date"] }}< / p > < br / >
{% if today_article and today_article["ratio"] is not none %}
< div class = "alert alert-success" role = "alert" >
According to your word list, your level is
< span class = "text-decoration-underline" id = "user_level" > {{ today_article["user_level"] }}< / span >
and we have chosen an article with a difficulty level of
< span class = "text-decoration-underline" id = "text_level" > {{ today_article["text_level"] }}< / span >
for you. The Oxford word coverage is
< span class = "text-decoration-underline" id = "ratio" > {{ (today_article["ratio"] * 100) | int }}%.< / span >
< / div >
{% else %}
< div class = "alert alert-warning" > No article or article is incomplete.< / div >
{% endif %}
< p class = "text-muted" id = "date" > Article added on: {{ today_article["date"] }}< / p > < br / >
< button onclick = "saveArticle()" > 标记文章< / button >
< select id = "saved_articles_dropdown" >
<!-- 这里将显示已经保存的文章 -->
< option > < / option >
< / select >
< button onclick = "saveArticle()" > 标记文章< / button >
< select id = "saved_articles_dropdown" >
<!-- 这里将显示已经保存的文章 -->
< option > < / option >
< / select >
< div class = "p-3 mb-2 bg-light text-dark" style = "margin: 0 0.5%;" > < br / >
< p class = "display-6" id = "article_title" > {{ today_article["article_title"] }}< / p > < br / >
@ -114,11 +125,13 @@
}
< / 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 id = "tooltip" > < / div >
< div id = "tooltip" > < / div >
< / div >
< div class = "alert alert-success" role = "alert" id = "not_found" style = "display:none;" >
< 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;" >
@ -163,7 +176,7 @@
允许动态调整顺序
< / label >
< br >
< a class = "btn btn-primary btn-lg" onclick = "random_select_word('{{ word }}')" role = "button" > 随机选取10个< / a >
< a class = "btn btn-primary btn-lg" onclick = "random_select_word('{{ word }}')" role = "button" > 随机选取10个< / a >
< a class = "btn btn-primary btn-lg" onclick = "location.reload();" role = "button" > 显示所有生词< / a >
< / p >
<!-- 添加导出按钮 -->
@ -367,7 +380,7 @@
savedArticlesDropdown.appendChild(option);
localStorage.setItem(articleTitle, articleJSON); // 以文章标题为键，
}
function loadSelectedArticle() {
function loadSelectedArticle() {
const selectedOption = document.getElementById('saved_articles_dropdown');
const selectedTitle = selectedOption.options[selectedOption.selectedIndex].text;
const articleJSON = localStorage.getItem(selectedTitle);
@ -378,9 +391,9 @@
}
}
window.onload = function() {
const savedArticlesDropdown = document.getElementById('saved_articles_dropdown');
savedArticlesDropdown.addEventListener('change', loadSelectedArticle);
window.onload = function() {
const savedArticlesDropdown = document.getElementById('saved_articles_dropdown');
savedArticlesDropdown.addEventListener('change', loadSelectedArticle);
// 先清空dropdown，
savedArticlesDropdown.innerHTML = '';
yzzob