badr_abdellaoui
/
EnglishPal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Now word order can change dynamically.

Bug521-LiYuFeng
李雨峰 2022-12-10 22:21:51 +08:00
parent e74f1ff477
commit c83905e17e
2 changed files with 132 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
app/static/js/word_operation.js
View File

@ -12,6 +12,19 @@ function familiar(theWord) {
} else {
$("#freq_" + theWord).text(new_freq);
}
// 逐个寻找对应的词汇，词频减一，然后重新排序并渲染
for (let index = 0; index < wordFrequency.length; index++) {
const element = wordFrequency[index];
if (element.word == word) {
wordFrequency[index].freq--;
if (wordFrequency[index].freq == 0) {
removeWord(word);
}
}
}
sortWordFrequency();
renderWords();
}
});
}
@ -26,6 +39,16 @@ function unfamiliar(theWord) {
success:function(response){
let new_freq = parseInt(freq) + 1;
$("#freq_" + theWord).text(new_freq);
// 逐个寻找对应的词汇，词频加一，然后重新排序并渲染
for (let index = 0; index < wordFrequency.length; index++) {
const element = wordFrequency[index];
if (element.word == word) {
wordFrequency[index].freq++;
}
}
sortWordFrequency();
renderWords();
}
});
}
@ -38,6 +61,98 @@ function delete_word(theWord) {
url:"/" + username + "/" + word + "/del",
success:function(response){
$("#p_" + theWord).remove();
// 删除对应词汇
removeWord(word);
sortWordFrequency();
renderWords();
}
});
}
/*
* wordFrequency的元素类型为
* interface Word {
* word: string,
* freq: number
* }
* */
let wordFrequency = [];
/**
* 初始化词频列表
*/
function init() {
// 获取所有的词频元素并逐个处理
const word_elements = document.getElementsByClassName("new-word");
for (const cur_element of word_elements) {
const word = cur_element
.querySelector("a.btn.btn-light[role=button]") // 获取当前词频元素的词汇元素
.innerText // 获取词汇值;
const freq = Number.parseInt(cur_element.querySelector(`#freq_${word}`).innerText); // 获取词汇的数量
wordFrequency.push({
word,
freq
});
}
renderWords();
}
/**
* 按照词频排序
* 词频相同时按照字典顺序排序
*/
function sortWordFrequency() {
wordFrequency.sort((a, b) => {
if (a.freq == b.freq) {
return a.word == b.word ? 0 : (a.word > b.word ? 1 : -1);
}
return b.freq - a.freq;
});
}
/**
* 使用模板将传入的单词转换为相应的HTML字符串
* @param { interface Word {
* word: string,
* freq: number,
* } } word
*/
function wordTemplate(word) {
// 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
return `<p id='p_${word.word}' class="new-word" >
<a id="word_${word.word}" class="btn btn-light" href='http://youdao.com/w/eng/${word.word}/#keyfrom=dict2.index'
role="button">${word.word}</a>
( <a id="freq_${word.word}" title="${word.word}">${word.freq}</a> )
<a class="btn btn-success" onclick="familiar('${word.word}')" role="button">熟悉</a>
<a class="btn btn-warning" onclick="unfamiliar('${word.word}')" role="button">不熟悉</a>
<a class="btn btn-danger" onclick="delete_word('${word.word}')" role="button">删除</a>
</p>`;
}
/**
* 将wordFrequency中的单词渲染为一个列表
* 这个列表将会被放置在一个class为word container的HTML元素中
*/
function renderWords() {
let container = document.querySelector(".word.container");
if (!container) {
// container不存在
container = document.createElement("div");
container.className = "word container";
document.body.appendChild(container);
}
container.innerHTML = "";
for (word of wordFrequency) {
container.innerHTML += wordTemplate(word);
}
// console.log(container.innerHTML);
}
function removeWord(word) {
wordFrequency = wordFrequency.filter((a) => a.word != word);
}

32
app/templates/userpage_get.html
View File

@ -20,7 +20,7 @@
<title>EnglishPal Study Room for {{ username }}</title>
</head>
<body>
<body onload="init()">
<div class="container-fluid">
<p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
<a class="btn btn-secondary" href="/logout" role="button">退出</a>
@ -68,21 +68,23 @@
{% if d_len > 0 %}
<p><b>我的生词簿</b></p>
{% for x in lst3 %}
{% set word = x[0] %}
{% set freq = x[1] %}
{% if session.get('thisWord') == x[0] and session.get('time') == 1 %}
<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 %}
<a name="aaa"></a>
{% 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>
</p>
{% endfor %}
{% 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>
</p>
{% endfor %}
</div>
<input id="selected-words2" type="hidden" value="{{ words }}">
{% endif %}
</div>