107 學年度資訊管理系專題期末報告心肺復甦術 CPR 學科練習 APP 測驗指導老師 : 羅逸文班級 : 四資管四 B 專題生 : 王瑜嬬楊若宸吳至宜許芳綺劉力銘中華民國 108 年 01 月 04 日

Size: px

Start display at page:

Download "107 學年度資訊管理系專題期末報告心肺復甦術 CPR 學科練習 APP 測驗指導老師 : 羅逸文班級 : 四資管四 B 專題生 : 王瑜嬬楊若宸吳至宜許芳綺劉力銘中華民國 108 年 01 月 04 日"

敬伉蒋
5 years ago
Views:

1 107 學年度資訊管理系專題期末報告心肺復甦術 CPR 學科練習 APP 測驗指導老師 : 羅逸文班級 : 四資管四 B 專題生 : 王瑜嬬楊若宸吳至宜許芳綺劉力銘中華民國 108 年 01 月 04 日

2 目錄第一章緒論研究動機研究目的研究方法... 5~6 1.4 製作過程... 6 第二章文獻探討 jquery 介紹... 8~9 2.2 響應式網頁設計 (RWD) 介紹... 10~ div data-role-page 網頁架構... 12~14 第三章實作過程步驟圖過程... 16~ 測驗練習過程... 18~ 練習單元過程... 23~27 第四章成果 CPR 版面介紹 CPR 介紹 CPR 步驟圖 CPR 練習 CPR 練習題頁面測試的頁面第五章結論 ~ 1 ~

3 第一章 ~ 2 ~

4 第一章緒論 1.1 研究動機現今使用手機的頻率越來越高, 有很多東西都以 APP 為主, 像很多衣服包包保養品... 等, 除了在網頁架設自己的網站, 也有陸續推出 APP 這個選擇, 讓消費者在外面也可以輕鬆購物, 不用侷限說只能在家才能線上購物我們想做一款跟測驗題庫相關的 APP, 讓考生可以在等車或坐車的時候, 使用測驗 APP 做線上練習或複習, 這樣也可以多一點時間讀書, 不用局限說只能回到家才能讀書所以我們以 CPR 測驗練習為主題, 做一款測驗練習 APP 讓大家多熟悉一些醫療常識, 在緊急狀況的時候, 可以直接急救, 不會錯過搶救時機, 也可以讓要考 CPR 證照的考生, 多一種選擇去練習, 就算在外面也可以讀書跟練習, 多一點時間準備考試 ~ 3 ~

5 1.2 研究目的在這種科技越來越發達的現代, 我們可以看到從現在小學生到八旬老人的每個人都擁有一支手機隨著智慧型手機的發展, 推出許多讓人們便利的 APP, 但這些 APP 大多都是購物之類的, 這讓我們想設計出不同的 APP 所以我們利用了現代人手機不離開自己身邊的通病, 設計出了一款 CPR 測驗練習 APP 我們做這款 CPR 測驗練習 APP 主要是有兩個目的 : 1. 幫助所有不具備相關知識或是只有一知半解的人能夠熟悉這些急救措施, 若是有突發性狀況也不致於讓我們手足無措 2. 不論是任何人或是想考 CPR 證照的考生, 只要是有智慧型手機的人都可以隨時在任何地方使用這款 CPR 測驗練習 APP 來讀書跟練習, 這樣不但非常方便也可以讓很多人準備很長的時間 ~ 4 ~

6 1.3 研究方法系統需求使用者端伺服器端 google chrome IE win11 Linux O.S. wamp server 開發軟體 HTML 5 CSS 6 j Query photo impact PHP MySQL ~ 5 ~

7 1.4 製作流程討論研究方向討論研究目的資料蒐集程式製作實作測驗結論 ~ 6 ~

8 第二章 ~ 7 ~

9 第二章文獻探討 2.1jQuery 介紹 jquery 是一套跨瀏覽器的 JavaScript 函式庫, 簡化 HTML 與 JavaScript 之間的操作由約翰雷西格 (John Resig) 在 2006 年 1 月的 BarCamp NYC 上釋出第一個版本目前是由 Dave Methvin 領導的開發團隊進行開發全球前 10,000 個存取最高的網站中, 有 65% 使用了 jquery, 是目前最受歡迎的 JavaScript 函式庫 ( 資料來源 WIKI) ( 範例 : 此次專題所用到之 jquery 部分程式碼 ) <script> vari = 0; var n; varmsg = new Array("Please put the pot the fire. Ken is going to cook some soup.", "Drugs can come in the form cookies and candy. Don't try it.", "Tina's mother always prepares a lot of cookies us."); var ma= new Array("A. for","a. of","a. about"); varmb= new Array("B. over","b. to","b. to"); var mc= new Array("C. in","c. on","c. for"); varaa= new Array("wrong.jpg", "correct.jpg", "wrong.jpg"); var Ab= new Array("correct.jpg", "wrong.jpg", "wrong.jpg"); var Ac= new Array("wrong.jpg", "wrong.jpg", "correct.jpg"); var luck= new Array("Luck1.gif", "Luck2.jpg", "Luck3.gif"); function showa() { $("#roleimg").attr("src", Aa[i]); function showb() { $("#roleimg").attr("src", Ab[i]); function showc() { ~ 8 ~

10 $("#roleimg").attr("src", Ac[i]); function prev() { i--; if (i< 0) {i = 2; n=math.floor(math.random()*3); $("#roleimg").attr("src", luck[n]); $("#rolemsg").text(msg[i]); $("#a").text(ma[i]); $("#b").text(mb[i]); $("#c").text(mc[i]); function next() { i++; if (i> 2) {i = 0; n=math.floor(math.random()*3); $("#roleimg").attr("src", luck[n]); $("#rolemsg").text(msg[i]); $("#a").text(ma[i]); $("#b").text(mb[i]); $("#c").text(mc[i]); </script> ~ 9 ~

2.2 響應式網頁設計 (RWD) 介紹響應式網頁設計 (Responsive Web Design) 簡稱 RWD, 又稱適應性網頁自適應網頁設計回應式網頁設計多螢網頁設計, 這是一項開始於 2011 年由 Ethan Marcotte 發明的術語 Responsive Web Design (RWD) 2012

11 2.2 響應式網頁設計 (RWD) 介紹響應式網頁設計 (Responsive Web Design) 簡稱 RWD, 又稱適應性網頁自適應網頁設計回應式網頁設計多螢網頁設計, 這是一項開始於 2011 年由 Ethan Marcotte 發明的術語 Responsive Web Design (RWD) 2012 年後被公認為是日後網頁設計開發技術的趨勢, 網站使用 CSS3, 以百分比的方式以及彈性的畫面設計, 在不同解析度下改變網頁頁面的佈局排版, 讓不同的設備都可以正常瀏覽同一網站, 提供最佳的視覺體驗, 是個因移動平台的用戶大量增加而想出的一個對應方法範例從左到右分別是不同的螢幕解析度所呈現的版面設計在傳統 PC 中, 會將許多元素並排 ; 在手機中, 會變成只有一行 ~ 10 ~

12 RWD 網頁原理響應式網頁設計的主要核心技術是 css3 media query, 就是讓不同解析度去套用不同的 css 設定 ( 看起來很簡單, 但會真的實作起來要注意的雜事很多 ) Media Query 引用方式 Media Query 的使用方式有兩種 : 1. 在.CSS 檔案中, 來判斷使用者螢幕寬度, 選擇載入哪一段 CSS screen and (max-device-width: 400px){ 在螢幕小於 400px 時, 套用此 css 2. 在 HTML 的載入的地方, 用 media 屬性判斷使用者裝置寬度, 選擇載入哪一個 CSS 檔案 ex: link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyscreen.css" 在螢幕小於 400px 時, 套用 tinyscreen.css Viewport 設定 meta name="viewport" content="width=device-width; initial-scale=1.0" 如果網頁的標頭沒有做這組設定的話, 手機會以高解析度來呈現畫面, 這就讓字變得很小, 使用者還要去做放大而不能直接閱讀我們需要的是讓行動裝置的螢幕來符合一般的像素公式, 單位一樣才比較好做設計基本上只要把握上面兩組設定的方式就可以開始製作自適應網頁了 ~ 11 ~

2.3div data-role-page 網頁架構是建立在 CSS DIV 單欄式網頁排版之架構下 : 如圖 CSS DIV 單欄式網頁排版呈現如上圖 : 這樣單欄式的一個頁面, 也就是左右沒有其他欄位, 但至少也要分為最上方的 Header 標頭中間的 Body 主要部分以及最下方的

13 2.3div data-role-page 網頁架構是建立在 CSS DIV 單欄式網頁排版之架構下 : 如圖 CSS DIV 單欄式網頁排版呈現如上圖 : 這樣單欄式的一個頁面, 也就是左右沒有其他欄位, 但至少也要分為最上方的 Header 標頭中間的 Body 主要部分以及最下方的 Footer 頁腳等區塊, 將每個區塊劃分出來後, 就能夠很容易的在各區塊內增加網頁內容, 為了能夠容易表達如何排出這樣的網頁排板, 以下分為 CSS style 以及 HTML Code 的兩個部分, 將此兩個部分結合在一起就能夠完成 <div data-role-page> 之網頁架構之程式碼 ~ 12 ~

14 <body> <div data-role="page"> <div data-role="header"> <h1> 歡迎訪問我的主頁 </h1> </div> <div data-role="content"> <p> 我是一名移動開發者!</p> </div> <div data-role="footer"> <h1> 頁腳文本 </h1> </div> </div> </body> 程式說明 : data-role="page" 是顯示在瀏覽器中的頁面 data-role="header" 創建頁面上方的工具欄 ( 常用於標題和搜索按鈕 ) data-role="content" 定義頁面的內容, 比如文本圖像表單和按鈕, 等等 data-role="footer" 創建頁面底部的工具欄在這些容器中, 您可以添加任意 HTML 元素 - 段落圖像標題列表等等 jquery Mobile, 可以在單一 HTML 文件中建立多個頁面 (pages) 並利用 id ( 每一個 id 必須是唯一不能重複 ) 來分隔每張頁面, 並使用 href 屬性來互相連接 : 實例 ~ 13 ~

15 <div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo"> 轉到頁面二 </a> </div></div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone"> 轉到頁面一 </a> </div> </div> 亦可將頁面用作對話框對話框是用來顯示信息或請求輸入的視窗類型如需在用戶點擊 ( 輕觸 ) 鏈接時創建一個對話框, 請向該鏈接添加 data-rel="dialog": 實例 <div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo" data-rel="dialog"> 轉到頁面二 </a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone"> 轉到頁面一 </a> </div> </di ~ 14 ~

16 第三章 ~ 15 ~

17 第三章實作過程 3.1 步驟圖過程上圖是步驟圖的版面 ~ 16 ~

18 使用的程式碼如下 : <head> <meta http-equiv="content-language" content="zh-tw"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>kevin File</title> <link rel="stylesheet" href="jquery.mobile min.css" /> <script src="jquery min.js"></script> <script src="jquery min.js"></script> <script src="jquery.mobile min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> var i = 0; var img = new Array("p1.jpg", "p2.jpg", "p3.jpg","p4.jpg","p5.jpg","p6.jpg","p7.jpg"); var msg = new Array("( 叫 ) 確認反應及呼吸 ", "( 叫 ) 求救, 打 119","(C) 胸部按壓 ","(A) 呼吸道 ","(B) 呼吸 "," 重複動作 ","(D) 去顫 "); function prev(){ i--; if (i < 0) {i = 6; $("#roleimg").attr("src", img[i]); $("#rolemsg").text(msg[i]); function next(){ i++; if (i > 6) {i = 0; $("#roleimg").attr("src", img[i]); $("#rolemsg").text(msg[i]); </script> </head> ~ 17 ~

19 3.2 測驗練習過程上圖是測驗練習的頁面 ~ 18 ~

20 使用的程式碼如下 : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>cpr Test System</title> <script Language="JavaScript"></script> <style> a:link { text-decoration: none; a:visited { ~ 19 ~

21 text-decoration: none; a:hover { text-decoration: underline; a:active { text-decoration: underline; * { box-sizing: border-box; /* Create four equal columns that floats next to each other */.column { float: left; width: 25%; padding: 20px; /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; /* On screens that are 992px wide or less, go from four columns to two columns screen and (max-width: 992px) {.column { width: 50%; /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ ~ 20 ~

22 @media screen and (max-width: 600px) {.column { width: 100%; </style> </head> <body> <form name="f1" method="post" action="pretest.php" hidden> <input type="text" name="section" value=a size="20"></form> <form name="f2" method="post" action="pretest.php" hidden> <input type="text" name="section" value=b size="20"></form> <form name="f3" method="post" action="pretest2.php" hidden> <input type="text" name="section" value=f size="20"></form> <form name="f4" method="post" action="pretest2.php" hidden> <input type="text" name="section" value=g size="20"></form> <form name="t1" method="post" action="exam.php" hidden> <input type="text" name="section" value=a size="20"></form> <form name="t2" method="post" action="exam.php" hidden> <input type="text" name="section" value=b size="20"></form> <form name="t3" method="post" action="exam2.php" hidden> <input type="text" name="section" value=f size="20"></form> <form name="t4" method="post" action="exam2.php" hidden> <input type="text" name="section" value=g size="20"></form> <h2 align="center"> 請選擇要練習的單元 </h2> <div class="row"> <div class="column" style="background-color:blue;"> <h2 align="center"><a href="javascript:send1()"><font color="#ffffff"> 單元一 : 急救概述 </font></a></h2> </div> <div class="column" style="background-color:green;"> <h2 align="center"><a href="javascript:send2()"><font color="#ffffff"> 單元二 : 心肺復甦術 </font></a></h2> </div> <div class="column" style="background-color:pink;"> <h2 align="center"><a href="javascript:send3()"><font color="#ffffff"> 是非題 : 認識紅十字 </font></a></h2> ~ 21 ~

23 </div> <div class="column" style="background-color:violet;"> <h2 align="center"><a href="javascript:send4()"><font color="#ffffff"> 是非題 : 急救概述 </font></a></h2> </div> <h5 align="center"> </h5> <h2 align="center"> 請選擇要測試的單元 </h2> <div class="column" style="background-color:#698b22;"> <h2 align="center"><a href="javascript:tsend1()"><font color="#ffffff"> 單元一 : 急救概述 </font></a></h2> </div> <div class="column" style="background-color:brown;"> <h2 align="center"><a href="javascript:tsend2()"><font color="#ffffff"> 單元一 : 急救概述 </font></a></h2> </div> <div class="column" style="background-color:#b23aee;"> <h2 align="center"><a href="javascript:tsend3()"><font color="#ffffff"> 是非題 : 認識紅十字 </font></a></h2> </div> <div class="column" style="background-color:#a4d3ee;"> <h2 align="center"><a href="javascript:tsend4()"><font color="#ffffff"> 是非題 : 急救概述 </font></a></h2> </div> </div> </body> </html> ~ 22 ~

24 3.3 練習單元過程上圖為練習單元的頁面 ~ 23 ~

25 使用的程式碼如下 : <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>cpr Test System</title> <script Language="JavaScript"></script> <style>.navmenu{ list-style: none; margin: 0; padding: 0; font: bold 10px 'Lato', sans-serif; /* use google custom font "Lato" */ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;.navmenu li{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 100px; margin-right: 5px; ~ 24 ~

26 margin-left: 5px; margin-bottom: 5px;.navmenu li a{ display: -webkit-box; display: -ms-flexbox; display: flex; height: 70px; /* height of links */ padding: 0 10px; position: relative; overflow: hidden; color: black; outline: none; border: 1px solid rgba(0,0,0,.1); border-bottom: 8px solid rgba(0,0,0,.1); opacity: 1; text-transform: uppercase; font-size: 1.8em; /* 18 * = 1px */ letter-spacing: em; background: #ff7473; /* default background color */ text-decoration: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* center text horizontally */ text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* center text vertically */ -webkit-transition: all.3s; transition: all.3s; /* Create shimmering effect */.navmenu li a:after{ content: ''; position: absolute; ~ 25 ~

27 width: 35%; height: 100%; background: white; opacity:.5; top: 0; left: -50%; -webkit-transform: skew(-20deg); transform: skew(-20deg); -webkit-transition: all.2s; transition: all.2s;.navmenu li:nth-of-type(2) a{ background: #ffc952;.navmenu li:nth-of-type(3) a{ background: #47b8e0;.navmenu li:nth-of-type(4) a{ color: white; background: #34314c;.navmenu li:nth-of-type(5) a{ background: #fdc23e;.navmenu li a:hover{ opacity:.7; -webkit-transition: all.3s; transition: all.3s;.navmenu li a:hover:after{ left: 150%; ~ 26 ~

28 -webkit-transition: all.4s; transition: all.4s;.navmenu li a:active{ box-shadow: 0-30px 10px rgba(255,255,255,.2) inset; border-bottom-width: 0; box-shadow: none; border-top: 8px solid rgba(0,0,0,.1); -webkit-transition: none; transition: screen and (max-width:760px){.navmenu li a{ font-size: 1.5em; </style> </head> <form name="f1" method="post" action="pretest.php" hidden> <input type="text" name="section" value=a size="20"></form> <form name="f2" method="post" action="pretest.php" hidden> <input type="text" name="section" value=b size="20"></form> <form name="f3" method="post" action="pretest.php" hidden> <input type="text" name="section" value=f size="20"></form> <form name="f4" method="post" action="pretest.php" hidden> <input type="text" name="section" value=g size="20"></form> <h1> 請選擇要練習的單元 </h1> <ul class="navmenu"> <li><a href="javascript:send1()"> 單元一 : 急救概述 </a></li> <li><a href="javascript:send2()"> 單元二 : 心肺復甦術 </a></li> <li><a href="javascript:send3()"> 是非題 : 認識紅十字 </a></li> <li><a href="javascript:send4()"> 是非題 : 急救概述 </a></li> <li><a href="#">contact</a></li> < ~ 27 ~

29 第四章 ~ 28 ~

30 第四章成果 4.1 CPR 版面介紹 ~ 29 ~

31 4.2 CPR 介紹讓使用者了解 CPR 的由來, 更清楚知道 CPR 的重要性 ~ 30 ~

32 4.3 CPR 步驟圖讓使用者可以清楚了解急救方式, 若有發生突發的緊急事故, 也能做適當的處理 ~ 31 ~

33 4.4 CPR 測驗練習我們在測驗練習這邊, 做了一些改變, 將練習題跟測驗分開, 讓使用者可以更清楚的去操作這個 App ~ 32 ~

34 4.5 CPR 練習題頁面這是練習題點進去後的畫面, 可以讓考生在考試之前, 可以在練習一下 ~ 33 ~

35 4.6 測試的頁面 ~ 34 ~

36 第五章 ~ 35 ~

37 第五章結論上學期我們利用 PPT 做了 CPR 的封面, 也上網查了 CPR 的介紹還有相關資訊的網站和影片, 甚至是 CPR 的題庫練習和步驟圖, 之後我們用了 FrontPage 下去做 APP, 把我們做出來的封面還有找到所有資料全部都寫入網頁程式碼裡, 才做出了一個完整的 CPR 測驗練習 APP 出來後來我們研究 jquery 與 RWD 的網頁新技術, 目前已將 CPR 題目直接寫入網頁程式碼中, 下學期主要研究目標為如何將 PHP MySQL 融入 jquery 與 RWD, 之後就可以隨時隨地用任何裝置新增修改和刪除, 並做題目適時的更新, 讓使用者更方便使用 ~ 36 ~

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

107 學年度資訊管理系 專題期末報告 心肺復甦術 CPR 學科練習 APP 測驗 指導老師 : 羅逸文班級 : 四資管四 B 專題生 : 王瑜嬬 楊若宸吳至宜 許芳綺 劉力銘 中華民國 108 年 01 月 04 日

107 學年度資訊管理系專題期末報告心肺復甦術 CPR 學科練習 APP 測驗指導老師 : 羅逸文班級 : 四資管四 B 專題生 : 王瑜嬬楊若宸吳至宜許芳綺劉力銘中華民國 108 年 01 月 04 日