[REFACTOR] 将Artical.py文件中的前端代码分离出来

app/Article.py

@@ -61,22 +61,14 @@ def get_today_article(user_word_list, articleID):
             if within_range(text_level, user_level, (8.0 - user_level) * factor):
                 d = reading
                 break
-
+            
-    s = '<div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success">%4.2f</span>  and we have chosen an article with a difficulty level of <span class="badge bg-success">%4.2f</span> for you.</div>' % (
+    article_date = d['date']
-        user_level, text_level)
-    s += '<p class="text-muted">Article added on: %s</p>' % (d['date'])
-    s += '<div class="p-3 mb-2 bg-light text-dark">'
     article_title = get_article_title(d['text'])
     article_body = get_article_body(d['text'])
-    s += '<p class="display-3">%s</p>' % (article_title)
+    question_part = get_question_part(d['question'])
-    s += '<p class="lead"><font id="article" size=2>%s</font></p>' % (article_body)
+    answer_part = get_answer_part(d['question'])
-    s += '<p><small class="text-muted">%s</small></p>' % (d['source'])
+    return user_level,text_level,article_date,article_title,article_body,question_part,answer_part
-    s += '<p><b>%s</b></p>' % (get_question_part(d['question']))
+
-    s = s.replace('\n', '<br/>')
-    s += '%s' % (get_answer_part(d['question']))
-    s += '</div>'
-    session['articleID'] = d['article_id']
-    return s
 
 
 def load_freq_history(path):
@@ -103,7 +95,7 @@ def get_question_part(s):
             flag = 0
         elif flag == 1:
             result.append(line)
-    return '\n'.join(result)
+    return result
 
 
 def get_answer_part(s):
@@ -117,20 +109,4 @@ def get_answer_part(s):
         elif flag == 1:
             result.append(line)
     # https://css-tricks.com/snippets/javascript/showhide-element/
-    js = '''
+    return result
-<script type="text/javascript">
-
-    function toggle_visibility(id) {
-       var e = document.getElementById(id);
-       if(e.style.display == 'block')
-          e.style.display = 'none';
-       else
-          e.style.display = 'block';
-    }
-</script>
-    '''
-    html_code = js
-    html_code += '\n'
-    html_code += '<button onclick="toggle_visibility(\'answer\');">ANSWER</button>\n'
-    html_code += '<div id="answer" style="display:none;">%s</div>\n' % ('\n'.join(result))
-    return html_code

app/templates/userpage_get.html

@@ -30,8 +30,48 @@
 
     <p><a class="btn btn-success" href="/{{ username }}/reset" role="button"> 下一篇 Next Article </a></p>
     <p><b>阅读文章并回答问题</b></p>
-    <div id="text-content">{{ today_article|safe }}</div>
+</div>
 
+<div id="text-content">
+    <div class="alert alert-success" role="alert">
+        According to your word list, your level is 
+        <span class="badge bg-success">{{ user_level }}</span>  
+        and we have chosen an article with a difficulty level of 
+        <span class="badge bg-success">{{ text_level }}</span> 
+        for you.
+    </div>
+    <p class="text-muted">Article added on: {{ article_date }}</p>
+    <div class="p-3 mb-2 bg-light text-dark">
+    <p class="display-3">{{ article_title }}</p>
+    <p class="lead"><font id="article" size=2>{{ article_body }}</font></p>
+    <p><b>
+        {% for x in question_part %}
+            {{ x }}
+    </br>
+        {% endfor %}
+    </b></p>
+    <script type="text/javascript">
+
+        function toggle_visibility(id) {
+           var e = document.getElementById(id);
+           if(e.style.display == 'block')
+              e.style.display = 'none';
+           else
+              e.style.display = 'block';
+        }
+    </script>
+    </br>
+    <button onclick="toggle_visibility('answer')">ANSWER</button></br>
+    <div id="answer" style="display:none;">
+        {% for x in answer_part %}
+            {{ x }}
+    </br>
+        {% endfor %}
+    </div></br>
+    </div>
+</div>
+
+<div class="container-fluid">
     <input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮
     <input type="checkbox" onclick="onReadClick()" checked/>大声朗读
     <input type="checkbox" onclick="onChooseClick()" checked/>划词入库

app/user_service.py

@@ -117,11 +117,19 @@ def userpage(username):
         words = ''
         for x in lst3:
             words += x[0] + ' '
+        user_level,text_level,article_date,article_title,article_body,question_part,answer_part = get_today_article(user_freq_record, session['articleID'])
         return render_template('userpage_get.html',
                                username=username,
                                session=session,
                                flashed_messages=get_flashed_messages_if_any(),
-                               today_article=get_today_article(user_freq_record, session['articleID']),
+                               d=d,
+                               user_level=user_level,
+                               text_level=text_level,
+                               article_date=article_date,
+                               article_title=article_title,
+                               article_body=article_body,
+                               question_part=question_part,
+                               answer_part=answer_part,
                                d_len=len(d),
                                lst3=lst3,
                                yml=Yaml.yml,
@@ -130,7 +138,6 @@ def userpage(username):
 
 
 
-
 @userService.route("/<username>/mark", methods=['GET', 'POST'])
 def user_mark_word(username):
     '''