iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

給心理人的前端網頁開發 系列

現代心理學的研究,常常會用到許多數位工具,例如統計軟體、電子問卷。網路與網頁的誕生,讓心理學研究的方法更加多元化。在這系列文中,將簡單介紹與教學前端語言三本柱:HTML、CSS、JavaScript,最後帶到實做網頁問卷、以及網頁心理學實驗。

你是心理人,對程式的世界有興趣嗎?
你是程式人,對心理學的研究感到好奇?
你是一般人,對這個混合領域感到陌生?

邀請您一同參與程式※心理學的奇幻之旅

鐵人鍊成 | 共 30 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

[給心理人的前端網頁開發] 11 關卡一:也許你不需要自己手刻履歷 - 各種履歷工具

如果不是當老闆的命,那通常會有需要寫履歷的時候。有些人會用網頁寫履歷,好處是當有朋友或是面試官想看履歷時,分享一個網址就能給對方看到。但用網頁做履歷有一些隱憂:...

2023-09-26 ‧ 由 ayugioh2003 分享
DAY 12

[給心理人的前端網頁開發] 12 關卡二:心理學研究工具與問卷

有些人認為科學的功能、目的有四個: 描述:針對問題或現象進行描述 解釋:對問題或現象的成因提供解釋 預測:在相同的條件下,猜測可能會有什麼結果 控制:調整條件...

2023-09-27 ‧ 由 ayugioh2003 分享
DAY 13

[給心理人的前端網頁開發] 13 關卡二:網路問卷的程式架構介紹

今天要來介紹網路問卷的程式架構。 其實網頁程式的運作,可以用一間餐廳的運作來比喻。餐廳基本上會有這些規劃:有櫃台與端盤服務生的前場、有做菜員工與廚師的後場,以及...

2023-09-28 ‧ 由 ayugioh2003 分享
DAY 14

[給心理人的前端網頁開發] 14 關卡二:網路問卷 - 用 Google Sheet 當資料庫

在前面網站架構有提到,通常會需要儲存資料的網站會至少由三個部份組成:前端、後端、資料庫。重新梳理一下整個網路問卷的架構: 使用者透過前端的網頁填寫問卷,並送出...

2023-09-29 ‧ 由 ayugioh2003 分享
DAY 15

[給心理人的前端網頁開發] 15 關卡二:網路問卷 - 用 Google App Script 當後端

關卡二要做出一個網路問卷系統。昨天講了用 Google Sheet 當作資料庫,今天要用 Google App Script 當作是後端。今天會提到 後端具體...

2023-09-30 ‧ 由 ayugioh2003 分享
DAY 16

[給心理人的前端網頁開發] 16 關卡二:網路問卷 - 在 CodeSandBox 上寫前端網頁問卷

關卡二要做出一個網路問卷系統。昨天講了用 Google App Script 當作後端,今天則是要做出前端網頁,讓整個網路問卷能順利運作。 請先看 demo...

2023-10-01 ‧ 由 ayugioh2003 分享
DAY 17

[給心理人的前端網頁開發] 17 關卡二:網路問卷 - 也許你不需要手刻網路問卷

自己手刻網路問卷的好處,是可以客製化功能。例如讓問卷上有絢麗特效、調整樣式、特殊的選擇區塊、自己蒐集資料方便後續處理等等。但壞處也是顯而易見的:花時間、開發難度...

2023-10-02 ‧ 由 ayugioh2003 分享
DAY 18

[給心理人的前端網頁開發] 18 關卡三:網路心理學實驗 - 實驗方法介紹

在第 12 天網路問卷介紹中,有提到在研究心理學時,會用到不同的研究方法、以及不同的研究工具。在關卡二提到的問卷,它是一種研究工具,在不同的研究方法中都有機會用...

2023-10-03 ‧ 由 ayugioh2003 分享
DAY 19

[給心理人的前端網頁開發] 19 關卡三:網路實驗 - jsPsych Hello World

前面提到了實驗是什麼、以及網路實驗的好處。今天要來用 jsPsych 這個前端套件,來寫一個網路實驗 Hello World。 一、前端套件是啥 在網頁這技術剛...

2023-10-04 ‧ 由 ayugioh2003 分享
DAY 20

[給心理人的前端網頁開發] 20 關卡三:網路實驗 - jsPsych Hello World 解說

昨天介紹了 jsPsych 是什麼,以及用它寫了一個 Hello World。今天來進一步的解說這範例做了什麼事情。 先附上程式碼: <!DOCTYPE...

2023-10-05 ‧ 由 ayugioh2003 分享