From 9b87c453f89dac955a375b9dc7f06fcdd6a3ef7c Mon Sep 17 00:00:00 2001
From: Devmc <dev.mcrf@qq.com>
Date: Fri, 9 Sep 2022 01:25:32 +0800
Subject: [PATCH] communication education

---
 static/utils.css               |  19 +++
 wiki/pages/collaborations.html |   6 +-
 wiki/pages/communication.html  | 231 ++++++++++++++++++++++++++++++++-
 wiki/pages/education.html      | 231 ++++++++++++++++++++++++++++++++-
 4 files changed, 478 insertions(+), 9 deletions(-)

diff --git a/static/utils.css b/static/utils.css
index 4a8e404..1cb486e 100644
--- a/static/utils.css
+++ b/static/utils.css
@@ -511,6 +511,25 @@ section > img.left {
     width: auto;
 }
 
+/*half*/
+.article .half {
+    width: 100%;
+    display: flex;
+}
+
+.article .half img {
+    width: 100%;
+    height: auto;
+}
+
+.article .half .left {
+    width: 50%;
+}
+
+.article .half .right {
+    width: 50%;
+}
+
 /*video*/
 .article > video,
 section > video {
diff --git a/wiki/pages/collaborations.html b/wiki/pages/collaborations.html
index bffa214..4f78620 100644
--- a/wiki/pages/collaborations.html
+++ b/wiki/pages/collaborations.html
@@ -12,7 +12,7 @@
       <h1 class="content-header2">Collaborations</h1>
 
       <section>
-        <h2>1. Overview</h2>
+        <h2 class="c-blue">1. Overview</h2>
         <p>
           Due to the pandemic and social distancing policies, it is relatively demanding to conduct face-to-face
           collaboration activities in Shanghai in July 2022. Thus, virtual meetings were adopted as the main
@@ -21,7 +21,7 @@
       </section>
 
       <section>
-        <h2>2. Collaboration with Pepsick (Shanghai_city)</h2>
+        <h2 class="c-blue">2. Collaboration with Pepsick (Shanghai_city)</h2>
         <div class="imager">
           <img class="rw-35"
                src="https://static.igem.wiki/teams/4281/wiki/collaborations/t-ecnuas-collaborations-01.jpg" alt="">
@@ -61,7 +61,7 @@
       </section>
 
       <section>
-        <h2>3. Collaboration with ATCG (SHBS-BANZ)</h2>
+        <h2 class="c-blue">3. Collaboration with ATCG (SHBS-BANZ)</h2>
         <div class="imager">
           <img class="rw-35"
                src="https://static.igem.wiki/teams/4281/wiki/collaborations/t-ecnuas-collaborations-03.jpg" alt="">
diff --git a/wiki/pages/communication.html b/wiki/pages/communication.html
index 266cfe9..a4e1067 100644
--- a/wiki/pages/communication.html
+++ b/wiki/pages/communication.html
@@ -9,11 +9,236 @@
 <div class="page">
   <div class="container">
     <div class="article">
-      <h1 class="content-header2">Communication</h1>
+      <h1 class="content-header2">Communication and Education</h1>
 
       <section>
-        <h2></h2>
-        <p></p>
+        <h2 class="c-blue">1. Introduction</h2>
+        <p>
+          Based on the survey, it can be concluded that the public knowledge of organ transplantation and
+          immunosuppression is still limited. Thus, in the first stage, the goal of communication and education
+          activities is to give a brief introduction to organ transplantation and immunosuppression. As the audience
+          familiarizes these concepts, the following activities in the second stage are designed to promote the
+          biotechnology our group applies and the final products our group will develop.
+        </p>
+        <p>
+          The focus audience of the communication and education activities are patients with diseases that require organ
+          transplantation as well as their relatives. Thus, the activities would be promoted in various healthcare
+          communities and social support groups. Due to the pandemic, the activities are mainly conducted online.
+        </p>
+      </section>
+
+      <section>
+        <h2 class="c-blue">2. Communication & Education Activities </h2>
+
+        <section>
+          <h3 class="upper">2.1 Science Polarization Activity - Online Lecture </h3>
+          <p>
+            A science polarization activity was conducted on July 8<sup>th</sup> in the format of an online lecture. The
+            online
+            lecture consisted of five parts. First, we explained the concepts of organ transplantation and the
+            difficulties in organ transplantation surgery, emphasizing the urgent need for more user-friendly and
+            affordable immunosuppressive drugs. Then, we used a short animation video to demonstrate the process of
+            organ transplantation and immunosuppression to show some real-life cases so that the audience can resonate
+            with the patients.
+          </p>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-01.jpg" alt="">
+            <span class="figure">
+              Slide about organ transplantation in the online lecture
+            </span>
+          </div>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-02.jpg" alt="">
+            <span class="figure">
+              Animation video in the online lecture
+            </span>
+          </div>
+          <p>
+            Following the introduction of organ transplantation and immunosuppression, our team illustrated the purpose,
+            process, and outcome of our experiments on producing Rapamycin, the main ingredient of anti-rejection drugs.
+            The prototype of our product is also demonstrated to the audience. To make the activity more intriguing,
+            some pop-up quiz games with rewards were also conducted, which were actively participated by the audience.
+            In general, the online science popularization activity was successful and the feedback from the audience was
+            very positive.
+          </p>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-03.jpg" alt="">
+            <span class="figure">
+              Slide about our experimental solution in the online lecture
+            </span>
+          </div>
+        </section>
+
+        <section>
+          <h3>2.2 Ted Talk Viewing Activity </h3>
+          <p>
+            After the concept of organ transplantation was clarified, a viewing activity of a Ted Talk was held online.
+            The main content of this Ted Talk is related to the breakthrough of organ transplantation through gene
+            editing made by geneticist Yang Luhan, which shared some similarities with our project background. The main
+            purpose of this Ted Talk viewing meeting was to enable the audience to further understand the significance
+            of gene editing in organ transplantation, suggesting the importance of our work. In order to invite more
+            audience to join this viewing activity, we designed and launched an invitation poster on WeChat.
+          </p>
+          <div class="imager">
+            <img class="rw-45"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-04.jpg" alt="">
+            <span class="figure">
+              Invitation poster to promote the Ted Talk viewing activity
+            </span>
+          </div>
+          <p>
+            As also shown in the Ted Talk, scientists have tried to transplant animal organs into human bodies for
+            decades. If the technology breakthrough can be achieved, tens of thousands of people who need organ
+            transplantation can be saved. However, the risk of organ transplantation is high, mainly because retrovirus
+            (PERV), which is beneficial to pigs but harmful to humans, will be transferred from pigs to humans through
+            transplantation. It may lead to a virus pandemic similar to AIDS. Yang Luhan's team mainly used CRISPR gene
+            editing technology to create a pig Lycra without the virus, and then opened a new era of cultivating organs
+            in animals for transplantation.
+          </p>
+          <div class="imager">
+            <img class="rw-85"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-05.jpg" alt="">
+            <span class="figure">
+              Snapshot of Ted Talk viewing activity
+            </span>
+          </div>
+        </section>
+      </section>
+
+      <section>
+        <h2 class="c-blue">3. Communication & Education Materials</h2>
+        <p>
+          Aside from the online activities, a number of communication and education materials in various forms were
+          distributed in case some of the audience could not participate in the online events due to time restraints. In
+          addition, considering that the activities could not fully demonstrate every aspect of the project our team
+          conducted, the communication and education materials were essential as supporting documents for the online
+          activities.
+        </p>
+        <p>
+          Thus, an official account, <b><i>Rapa OT</i></b>, was established on WeChat in this July, the most commonly
+          used social
+          platform in China. The account aimed to distribute information on organ transplantation, immunosuppression,
+          and biotechnology related to our project which were consistent with the materials we applied in online
+          activities. The content of the articles published on this account also contained vital information about our
+          project in terms of the theoretical frameworks, methodologies, experiments, and other details so that the
+          audience could have a better understanding of our project. Several articles were posted with a considerable
+          viewing rate. In addition, the fundraising activity was also promoted and conducted through this account.
+        </p>
+        <div class="imager">
+          <img class="rw-100"
+               src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-06.jpg" alt="">
+          <span class="figure">
+            Snapshots of WeChat posts
+          </span>
+        </div>
+        <p>
+          Aside from textual materials distributed on WeChat accounts, we also produced a Chinese song and comics
+          regarding organ transplantation as visual and audit stimulations that could attract additional viewership. The
+          lyrics of the song described the suffering and hope of patients who underwent organ transplantation surgery,
+          which could make the audience resonate with the patient and arise further public discussion with social
+          concerns on this issue. The comic, on the other hand, illustrated how immunosuppressive drugs function in the
+          human body that is counterpart to the complication of organ transplantation.
+        </p>
+        <div class="imager">
+          <img class="rw-100"
+               src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-07.jpg" alt="">
+          <span class="figure">
+            Pictures of comics
+          </span>
+        </div>
+
+        <br>
+        <b class="hs-3">Song lyrics</b>
+        <section class="c-blue hs-5 text-center">
+          <span>
+            <b>
+              “移”路有我/With You on the “Transplantation” <br>
+              Producer: Rapa OT
+            </b>
+          </span>
+
+          <div class="half">
+            <div class="left fst-italic" style="white-space: pre-line">
+              让我掉下眼泪的 不止昨夜的酒
+              让我依依不舍的 不止你的温柔
+              余路还要走多久 你攥着我的手
+              让我感到为难的 是挣扎的自由
+              分别总是在九月 回忆是思念的愁
+              深秋嫩绿的垂柳 亲吻着我额头
+              在那座阴雨的小城里 我从未忘记你
+              成都 带不走的 只有你
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 坐在小酒馆的门口
+              分别总是在九月 回忆是思念的愁
+              深秋嫩绿的垂柳 亲吻着我额头
+              在那座阴雨的小城里 我从未忘记你
+              成都 带不走的 只有你
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 坐在小酒馆的门口
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 走过小酒馆的门口
+            </div>
+            <div class="right fst-italic" style="white-space: pre-line">
+              让你病房落泪的 不止窗外的秋
+              让我独自叹息的 不止你的清瘦
+              等待康复要多久 和你熬白了头
+              每天等医生开药 那花钱如水流
+              器官移植的磨难 多想能替你承受
+              本来光明的未来 被药价压低头
+              在那间洁白的病房里 我一直陪着你
+              病魔 带不走的 只有你
+              哪怕要拿走我和我的所有 喔...
+              直到手术后心重新跳动也不放手
+              担心并发症的发作 我在床前坐了一宿
+              骗你抑制剂不苦口 祈祷那命运的庇佑
+              基因敲除的技术 为了生命的拯救
+              雷帕霉素的生产 舒展了你眉头
+              在那间洁白的病房里 我一直陪着你
+              病魔 带不走的 只有你
+              不再要献上我和我的所有 喔...
+              日服的抑制剂价格也终于能承受
+              担心并发症的发作 我在床前坐了一宿
+              骗你抑制剂不苦口 祈祷那命运的庇佑
+              康复后和你在家里走一走 喔...
+              感谢基因敲除带来那科技的温柔
+              康复后和你在梦里走一走 喔...
+              感谢雷帕梅带来那科技的温柔
+              不再担心病会发作 和你床上依偎一宿
+              一切食物显得可口 这是那命运的庇佑
+            </div>
+          </div>
+
+          <br>
+          <span>
+            <i>
+              <b>P.S.</b> So far we haven’t yet translate the song into English since it might not deliver the song
+              rhythm well
+            </i>
+          </span>
+        </section>
+      </section>
+
+      <section>
+        <h2 class="c-blue">4. Conclusion </h2>
+        <p>
+          Generally, the communication and education activities, as well as materials, are successful for they reach a
+          considerable amount of audience, which is still increasing as a growing number of people are aware of the
+          social impact of organ transplantation and our project. In view of the pandemic situation, social distancing
+          policies, and lockdown regulations, we have no choice but to conduct communication and education campaigns
+          online. In the future, offline education activities in schools, booklet distribution, and lectures in
+          apartment communities can be implemented as parts of communication and education activities.
+        </p>
       </section>
     </div>
 
diff --git a/wiki/pages/education.html b/wiki/pages/education.html
index aa0edb0..7f4b1b4 100644
--- a/wiki/pages/education.html
+++ b/wiki/pages/education.html
@@ -9,11 +9,236 @@
 <div class="page">
   <div class="container">
     <div class="article">
-      <h1 class="content-header2">Education</h1>
+      <h1 class="content-header2">Communication and Education</h1>
 
       <section>
-        <h2></h2>
-        <p></p>
+        <h2 class="c-blue">1. Introduction</h2>
+        <p>
+          Based on the survey, it can be concluded that the public knowledge of organ transplantation and
+          immunosuppression is still limited. Thus, in the first stage, the goal of communication and education
+          activities is to give a brief introduction to organ transplantation and immunosuppression. As the audience
+          familiarizes these concepts, the following activities in the second stage are designed to promote the
+          biotechnology our group applies and the final products our group will develop.
+        </p>
+        <p>
+          The focus audience of the communication and education activities are patients with diseases that require organ
+          transplantation as well as their relatives. Thus, the activities would be promoted in various healthcare
+          communities and social support groups. Due to the pandemic, the activities are mainly conducted online.
+        </p>
+      </section>
+
+      <section>
+        <h2 class="c-blue">2. Communication & Education Activities </h2>
+
+        <section>
+          <h3 class="upper">2.1 Science Polarization Activity - Online Lecture </h3>
+          <p>
+            A science polarization activity was conducted on July 8<sup>th</sup> in the format of an online lecture. The
+            online
+            lecture consisted of five parts. First, we explained the concepts of organ transplantation and the
+            difficulties in organ transplantation surgery, emphasizing the urgent need for more user-friendly and
+            affordable immunosuppressive drugs. Then, we used a short animation video to demonstrate the process of
+            organ transplantation and immunosuppression to show some real-life cases so that the audience can resonate
+            with the patients.
+          </p>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-01.jpg" alt="">
+            <span class="figure">
+              Slide about organ transplantation in the online lecture
+            </span>
+          </div>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-02.jpg" alt="">
+            <span class="figure">
+              Animation video in the online lecture
+            </span>
+          </div>
+          <p>
+            Following the introduction of organ transplantation and immunosuppression, our team illustrated the purpose,
+            process, and outcome of our experiments on producing Rapamycin, the main ingredient of anti-rejection drugs.
+            The prototype of our product is also demonstrated to the audience. To make the activity more intriguing,
+            some pop-up quiz games with rewards were also conducted, which were actively participated by the audience.
+            In general, the online science popularization activity was successful and the feedback from the audience was
+            very positive.
+          </p>
+          <div class="imager">
+            <img class="rw-65"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-03.jpg" alt="">
+            <span class="figure">
+              Slide about our experimental solution in the online lecture
+            </span>
+          </div>
+        </section>
+
+        <section>
+          <h3>2.2 Ted Talk Viewing Activity </h3>
+          <p>
+            After the concept of organ transplantation was clarified, a viewing activity of a Ted Talk was held online.
+            The main content of this Ted Talk is related to the breakthrough of organ transplantation through gene
+            editing made by geneticist Yang Luhan, which shared some similarities with our project background. The main
+            purpose of this Ted Talk viewing meeting was to enable the audience to further understand the significance
+            of gene editing in organ transplantation, suggesting the importance of our work. In order to invite more
+            audience to join this viewing activity, we designed and launched an invitation poster on WeChat.
+          </p>
+          <div class="imager">
+            <img class="rw-45"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-04.jpg" alt="">
+            <span class="figure">
+              Invitation poster to promote the Ted Talk viewing activity
+            </span>
+          </div>
+          <p>
+            As also shown in the Ted Talk, scientists have tried to transplant animal organs into human bodies for
+            decades. If the technology breakthrough can be achieved, tens of thousands of people who need organ
+            transplantation can be saved. However, the risk of organ transplantation is high, mainly because retrovirus
+            (PERV), which is beneficial to pigs but harmful to humans, will be transferred from pigs to humans through
+            transplantation. It may lead to a virus pandemic similar to AIDS. Yang Luhan's team mainly used CRISPR gene
+            editing technology to create a pig Lycra without the virus, and then opened a new era of cultivating organs
+            in animals for transplantation.
+          </p>
+          <div class="imager">
+            <img class="rw-85"
+                 src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-05.jpg" alt="">
+            <span class="figure">
+              Snapshot of Ted Talk viewing activity
+            </span>
+          </div>
+        </section>
+      </section>
+
+      <section>
+        <h2 class="c-blue">3. Communication & Education Materials</h2>
+        <p>
+          Aside from the online activities, a number of communication and education materials in various forms were
+          distributed in case some of the audience could not participate in the online events due to time restraints. In
+          addition, considering that the activities could not fully demonstrate every aspect of the project our team
+          conducted, the communication and education materials were essential as supporting documents for the online
+          activities.
+        </p>
+        <p>
+          Thus, an official account, <b><i>Rapa OT</i></b>, was established on WeChat in this July, the most commonly
+          used social
+          platform in China. The account aimed to distribute information on organ transplantation, immunosuppression,
+          and biotechnology related to our project which were consistent with the materials we applied in online
+          activities. The content of the articles published on this account also contained vital information about our
+          project in terms of the theoretical frameworks, methodologies, experiments, and other details so that the
+          audience could have a better understanding of our project. Several articles were posted with a considerable
+          viewing rate. In addition, the fundraising activity was also promoted and conducted through this account.
+        </p>
+        <div class="imager">
+          <img class="rw-100"
+               src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-06.jpg" alt="">
+          <span class="figure">
+            Snapshots of WeChat posts
+          </span>
+        </div>
+        <p>
+          Aside from textual materials distributed on WeChat accounts, we also produced a Chinese song and comics
+          regarding organ transplantation as visual and audit stimulations that could attract additional viewership. The
+          lyrics of the song described the suffering and hope of patients who underwent organ transplantation surgery,
+          which could make the audience resonate with the patient and arise further public discussion with social
+          concerns on this issue. The comic, on the other hand, illustrated how immunosuppressive drugs function in the
+          human body that is counterpart to the complication of organ transplantation.
+        </p>
+        <div class="imager">
+          <img class="rw-100"
+               src="https://static.igem.wiki/teams/4281/wiki/coms/t-ecnuas-communication-07.jpg" alt="">
+          <span class="figure">
+            Pictures of comics
+          </span>
+        </div>
+
+        <br>
+        <b class="hs-3">Song lyrics</b>
+        <section class="c-blue hs-5 text-center">
+          <span>
+            <b>
+              “移”路有我/With You on the “Transplantation” <br>
+              Producer: Rapa OT
+            </b>
+          </span>
+
+          <div class="half">
+            <div class="left fst-italic" style="white-space: pre-line">
+              让我掉下眼泪的 不止昨夜的酒
+              让我依依不舍的 不止你的温柔
+              余路还要走多久 你攥着我的手
+              让我感到为难的 是挣扎的自由
+              分别总是在九月 回忆是思念的愁
+              深秋嫩绿的垂柳 亲吻着我额头
+              在那座阴雨的小城里 我从未忘记你
+              成都 带不走的 只有你
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 坐在小酒馆的门口
+              分别总是在九月 回忆是思念的愁
+              深秋嫩绿的垂柳 亲吻着我额头
+              在那座阴雨的小城里 我从未忘记你
+              成都 带不走的 只有你
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 坐在小酒馆的门口
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              和我在成都的街头走一走 喔…
+              直到所有的灯都熄灭了也不停留
+              你会挽着我的衣袖 我会把手揣进裤兜
+              走到玉林路的尽头 走过小酒馆的门口
+            </div>
+            <div class="right fst-italic" style="white-space: pre-line">
+              让你病房落泪的 不止窗外的秋
+              让我独自叹息的 不止你的清瘦
+              等待康复要多久 和你熬白了头
+              每天等医生开药 那花钱如水流
+              器官移植的磨难 多想能替你承受
+              本来光明的未来 被药价压低头
+              在那间洁白的病房里 我一直陪着你
+              病魔 带不走的 只有你
+              哪怕要拿走我和我的所有 喔...
+              直到手术后心重新跳动也不放手
+              担心并发症的发作 我在床前坐了一宿
+              骗你抑制剂不苦口 祈祷那命运的庇佑
+              基因敲除的技术 为了生命的拯救
+              雷帕霉素的生产 舒展了你眉头
+              在那间洁白的病房里 我一直陪着你
+              病魔 带不走的 只有你
+              不再要献上我和我的所有 喔...
+              日服的抑制剂价格也终于能承受
+              担心并发症的发作 我在床前坐了一宿
+              骗你抑制剂不苦口 祈祷那命运的庇佑
+              康复后和你在家里走一走 喔...
+              感谢基因敲除带来那科技的温柔
+              康复后和你在梦里走一走 喔...
+              感谢雷帕梅带来那科技的温柔
+              不再担心病会发作 和你床上依偎一宿
+              一切食物显得可口 这是那命运的庇佑
+            </div>
+          </div>
+
+          <br>
+          <span>
+            <i>
+              <b>P.S.</b> So far we haven’t yet translate the song into English since it might not deliver the song
+              rhythm well
+            </i>
+          </span>
+        </section>
+      </section>
+
+      <section>
+        <h2 class="c-blue">4. Conclusion </h2>
+        <p>
+          Generally, the communication and education activities, as well as materials, are successful for they reach a
+          considerable amount of audience, which is still increasing as a growing number of people are aware of the
+          social impact of organ transplantation and our project. In view of the pandemic situation, social distancing
+          policies, and lockdown regulations, we have no choice but to conduct communication and education campaigns
+          online. In the future, offline education activities in schools, booklet distribution, and lectures in
+          apartment communities can be implemented as parts of communication and education activities.
+        </p>
       </section>
     </div>
 
-- 
GitLab