FBI Lab於2020年11月在國立清華大學舉辦「2020印象清華—有A的STEM科普藝術節」，其中的「STEAM互動探索體驗館」展示了可被操作、被觀視、被探索的跨學科互動作品，為台灣的STEAM教育帶來新的啟示。而在STEAM互動探索體驗館中，我們開發出「躍介物聯網互動創意問卷系統(IoT Cross-Media & QA System)」，其架構在躍介物聯網系統的基礎之上，運用手機的可觸握特性實現遊戲般的「撈取題目」與「倒入結果」互動，並將系統中的數據作即時的資料視覺化，以數位資料再現的形式呈現。
躍介物聯網互動創意問卷系統配合STEAM互動探索體驗館內的展區配置、跨學科互動作品與主要受眾，規劃一系列的使用者操作流程、展場問卷與數位資料再現內容，讓來STEAM體驗館中的參與者除了對作品遊玩與探索外，也能使用本系統考驗對作品原理的理解、並給予作品的「有趣程度」及「學習效果」反饋，最後將作答結果〝倒入〞群眾藝術創作作品《為學習加點料》中，觀看自身數據對群體學習結果所造成的變化並成為作品的創作者之一。
本研究展示了「躍介物聯網互動創意問卷系統」與「以問卷回饋作數位資料再現」的實作與實際應用於展場場域中的研究成果與發現。我們打造物聯網環境下遊戲化的展館問卷與互動設計，並呈現〝群體〞且〝即時〞問卷結果，也將群體學習結果再現為「群眾藝術創作」，最後激發群體之間的激勵作用四個目標。這樣的研究與實踐在台灣展館是少見的。

The FBI Lab held the “Tsing Hua Effect 2020 - STEM with A Technology Art Festival” at National Tsing Hua University in November 2020. The STEAM interactive exploration hall has exhibited a series of interdisciplinary interactive artworks that can be viewed, manipulated, and explored, bringing new insights to STEAM education in Taiwan. At the STEAM interactive exploration hall, we have developed the “IoT Cross-Media & QA System”. Its architecture is supported by the IoT Cross-Media System. We used the tangible feature of mobile phones to perform the interaction of “scoop up questions” and “pour in answers”, visualized the real-time data in the system, and presented it in the form of digital data representation.
The IoT Cross-Media & QA System collaborates with the exhibition area configuration, the interdisciplinary interactive works, and the main audiences of the STEAM interactive exploration hall. We organized a series of user operating procedures, exhibition questionnaires, and digital data representation content to allow participants to manipulate and explore interactive artwork. Participants were also invited to test their understanding of these theories of the work of art and giving feedback on the “interesting level” and “learning effect” for each work by using the system. In addition, they could become one of the authors of the “mass artistic creation” by “pour in” their answer in the artwork “Add Some Material to Learning” and observed the influence of their data on the group learning results.
This research demonstrated the implementation and practical application of “IoT Cross-Media & QA System” and “Representation of Digital Data with Survey Feedback” in the exhibition arena. The results of the research are applied to the exhibition site and have achieved the gamification of the exhibition hall survey. It also presents the results of the participants' “groups” in real-time. Moreover, represents the learning outcomes as “mass artistic creation” and triggers the motivating effect between groups. Such research and practice at exhibition hall are rare in Taiwan.

摘要 i
Abstract ii
誌謝 iii
圖目錄 v
第一章 緒論 1
第一節　研究背景與動機 1
第二節　研究目的與問題 2
第三節　研究架構與流程 3
第二章 文獻探討 5
第一節　物聯網相關文獻討論 5
第二節　可觸握式使用者介面相關文獻討論 8
第三節　問卷與資料視覺化相關文獻討論 8
第三章 研究方法與設計 14
第一節　STEAM體驗館與環境建置 14
一、展覽與STEAM體驗館介紹 14
二、躍介互動問卷系統的相關設置和使用者操作流程說明 16
第二節　躍介互動問卷系統架構說明 22
一、躍介互動問卷系統的物件類別 22
二、物件之間的通訊協議 24
三、物件之間的資料傳輸內容 25
第三節　躍介互動問卷系統演算法 28
一、「撈取題目」演算法 28
二、「倒入結果」演算法 30
三、資料再現演算法 31
第四節　躍介互動問卷系統的展場實作執行 38
一、STEAM體驗館相關紀錄 39
二、躍介互動問卷系統的相關紀錄、分析與檢討 42
第四章 結論與未來展望 49
參考文獻 52

[1] 黃裕雄、許素朱(2015)。〈非接觸電容之可觸握行動手機介面在跨界展示科技之研究〉。第二屆國際科技藝術學術研討會，台灣台南市，2015年12月4日。
[2] Liu, S. T., Hsu, S. C., & Huang, Y. H. (2020). “Data Paradigm Shift in Cross-Media IoT System”. Paper presented at International Conference on Human-Computer Interaction (HCII2020), Copenhagen, Denmark.
[3] 未來創意互動實驗室(FBI Lab)。2019印象清華—躍介科技藝術節。台灣新竹市。http://techart.nthu.edu.tw/?p=3274（2021年8月5日瀏覽）
[4] Gonzalez, H. B., & Kuenzi, J. J. (2012). “Science, technology, engineering, and mathematics (STEM) education: A primer”. Congressional Research Service, Library of Congress, Washington, DC, USA.
[5] Feldman, A. (2015). “STEAM Rising: Why we need to put the arts into STEM education?”. Retrieved from https://slate.com/technology/2015/06/steam-vs-stem-why-we-need-to-put-the-arts-into-stem-education.html (Jun 20, 2021)
[6] 未來創意互動實驗室(FBI Lab)。2020印象清華—有A的STEM科普藝術節。台灣新竹市。https://fbilab.co/nthu/techart/THE2020/#/home（2021年5月30日瀏覽）
[7] Hornecker, E., & Buur, J. (2006). “Getting a grip on tangible interaction: a framework on physical space and social interaction”. In Proceedings of the conference on Human Factors in computing systems (CHI2006), Québec, Canada.
[8] Ashton, K. (2009). “That ‘internet of things’ thing”. RFID journal, 22(7), 97-114.
[9] Atzori, L., Iera, A., & Morabito, G. (2010). “The internet of things: A survey”. Computer networks, 54(15), 2787-2805.
[10] Xu, L.D., He W., & Li, S. (2014). “Internet of Things in Industries: A Survey”. IEEE Transactions on Industrial Informatics, vol. 10, no. 4, pp. 2233-2243, Nov. 2014, doi: 10.1109/TII.2014.2300753.
[11] Wikipedia. “Internet of things”. Retrieved from https://en.wikipedia.org/wiki/Internet_of_things (Jul 10, 2021)
[12] Gartner, Inc. “Information Technology Glossary: Internet Of Things (iot)”. Retrieved from https://www.gartner.com/en/information-technology/glossary/internet-of-things (Jul. 25, 2021)
[13] Asghari, P., Rahmani, A. M., & Javadi, H. H. S. (2019). “Internet of Things applications: A systematic review”. Computer Networks, 148, 241-261.
[14] Liu, S. T., Hsu, S. C., & Wu, P. Y. (2018). “Poster & Demo: Mushroom Dialogues”. TAICHI2018, Hsinchu, Taiwan, Aug 26–28 2018.
[15] Liu, S. T., Hsu, S. C., & Wu, P. Y. (2018). “Poster & Demo: “‘English 8-2’- Interactive Led Public Art with IoT and Social Media”. TAICHI2018, Hsinchu, Taiwan, Aug 26–28 2018.
[16] Yang, J. C., & Hsu, S. C. (2017). “The Study and Application of Smart Art Community Service with ‘ESPSAS’ Internet of Things Platform”. Paper presented at 19th International Conference on Human-Computer Interaction (HCII2017), Vancouver, Canada, Jul 9–14 2017.
[17] 劉士達（2009）。《無線感測網路在互動群體交流之應用與研究》。國立臺北藝術大學科技藝術研究所碩士論文，台北市。 取自https://hdl.handle.net/11296/4rbdp2
[18] 楊政錞（2017）。《ESPSAS物聯網平台研發與智慧藝術設計服務應用》。國立臺北藝術大學新媒體藝術學系碩士班碩士論文，台北市。 取自https://hdl.handle.net/11296/e6483w
[19] 未來創意互動實驗室(FBI Lab)。2018印象清華—物聯網科技藝術節。台灣新竹市。http://techart.nthu.edu.tw/?page_id=68（2021年8月5日瀏覽）
[20] 許素朱(FBI Lab)、劉士達、吳柏瑤(2018)。〈蘑菇總動員〉。2018印象清華—物聯網科技藝術節，http://techart.nthu.edu.tw/?page_id=68（2021年8月5日瀏覽）。
[21] Ishii, H., & Ullmer, B. (1997). “Tangible bits: towards seamless interfaces between people, bits and atoms”. In Proceedings of the ACM SIGCHI Conference on Human factors in computing systems (CHI1997), Atlanta Georgia, USA.
[22] Ishii, H. (2008). “Tangible bits: beyond pixels”. In Proceedings of the 2nd international conference on Tangible and embedded interaction (TEI2008), Bonn, Germany.
[23] Harms, J., Wimmer, C., Kappel, K., & Grechenig, T. (2014). “Gamification of online surveys: conceptual foundations and a design process based on the MDA framework”. In Proceedings of the 8th Nordic conference on human-computer interaction: Fun, fast, foundational (NordiCHI2014), Helsinki, Finland.
[24] Harms, J., Biegler, S., Wimmer, C., Kappel, K., & Grechenig, T. (2015). “Gamification of online surveys: Design process, case study, and evaluation”. In IFIP Conference on Human-Computer Interaction, Bamberg, Germany.
[25] Gallacher, S., Golsteijn, C., Wall, L., Koeman, L., Andberg, S., Capra, L., & Rogers, Y. (2015). Getting quizzical about physical: observing experiences with a tangible questionnaire. In Proceedings of the 2015 ACM International Joint Conference on Pervasive and Ubiquitous Computing (UBICOMP2015), Osaka, Japan.
[26] Golsteijn, C., Gallacher, S., Koeman, L., Wall, L., Andberg, S., Rogers, Y., & Capra, L. (2015). VoxBox: A tangible machine that gathers opinions from the public at events. In Proceedings of the Ninth International Conference on Tangible, Embedded, and Embodied Interaction (TEI2015), California, USA.
[27] Wikipedia. “Data Visualization”. Retrieved from https://en.wikipedia.org/wiki/Internet_of_things (Jul 12, 2021)
[28] SAS Institute Inc. “Data Visualization: What it is and why it matters”. Retrieved from https://www.sas.com/en_us/insights/big-data/data-visualization.html (Aug 3, 2021)
[29] Weskamp, M. (2004). Newsmap.jp. Retrieved from http://newsmap.jp (Aug 14, 2021)
[30] HINT.FM .Wind Map. Retrieved from http://hint.fm/wind/ (Aug. 16, 2021)
[31] Bybee, R.W (2010). “What Is STEM Education?”. SCIENCE, 329(5995). 996. DOI: 10.1126/science.1194998.
[32] 趙英傑（2017）。〈MQTT教學（一）：認識MQTT〉。https://swf.com.tw/?p=1002（2021年6月20日瀏覽）
[33] 凱（2020）。〈MQTT 協議簡介、與Websocket的區別〉。https://www.mabokai.ltd/Home/Info?id=fac3baf7-6c99-4b7b-8e79-288728ebc196（2021年6月22日瀏覽）
[34] 張善友（2014）。〈TCP/IP, WebSocket 和 MQTT〉。https://www.cnblogs.com/shanyou/p/4085802.html（2021年6月22日瀏覽）
[35] Gary（2019）。〈一文搞懂 HTTP 和 HTTPS 是什麼？兩者有什麼差別〉。https://tw.alphacamp.co/blog/http-https-difference（2021年6月23日瀏覽）
[36] Vamoss (2019). Circular Hello Curves. Retrieved from https://openprocessing.org/sketch/697891(Oct 8, 2020)
[37] BRM·IO. (2015). Timescale.js. Retrieved from https://github.com/liabru/matter-js/blob/master/examples/timescale.js (Oct 27, 2020)
[38] Pinn, M. (2014). Soul Sea Plant. Retrieved from https://openprocessing.org/sketch/158347 (Oct 28, 2020)