圖片誘發(fā)情緒實(shí)驗(yàn)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

池慧玲， 卿粼波， 劉 蘋(píng)， 王亞男

（1 四川大學(xué) 電子信息學(xué)院， 成都 610065； 2 四川大學(xué) 商學(xué)院， 成都 610064）

0 引言

根據(jù)行為和神經(jīng)科學(xué)的研究，不同的圖片在某種程度上能夠誘發(fā)人們不同的情緒，為了驗(yàn)證積極的圖片，例如：“花卉植物”、“動(dòng)物萌寵”、“自然風(fēng)景”等是否能夠激發(fā)人們積極的情緒，產(chǎn)生愉悅的心情；消極的圖片是否會(huì)使人們感到恐懼和不安，許多心理學(xué)領(lǐng)域的研究人員利用軟件E－Prime 做了大量的實(shí)驗(yàn)。 E－Prime 是實(shí)現(xiàn)行為研究的一個(gè)跨平臺(tái)系統(tǒng)，是一個(gè)心理實(shí)驗(yàn)生成系統(tǒng)，優(yōu)化了在行為實(shí)驗(yàn)中的刺激組織、時(shí)間精度等功能［1］。 但E－Prime為單任務(wù)的結(jié)構(gòu)，不能同時(shí)進(jìn)行多個(gè)任務(wù)，且在設(shè)計(jì)復(fù)雜的心理實(shí)驗(yàn)時(shí)需要編寫(xiě)相關(guān)控件的代碼，對(duì)研究人員的編程能力要求較高。

除此之外，心理學(xué)研究人員較常用的軟件是DMDX，但面對(duì)大量的實(shí)驗(yàn)數(shù)據(jù)，DMDX 不能在系統(tǒng)內(nèi)進(jìn)行數(shù)據(jù)的篩選和管理，需借助其他軟件才能完成［2］。

本文針對(duì)上述實(shí)驗(yàn)軟件的不足，運(yùn)用B／S 架構(gòu)設(shè)計(jì)開(kāi)發(fā)了圖片誘發(fā)情緒實(shí)驗(yàn)研究的系統(tǒng)，該系統(tǒng)可支持多種格式的圖片、音頻等誘發(fā)材料，實(shí)現(xiàn)了在互聯(lián)網(wǎng)上進(jìn)行圖片誘發(fā)情緒實(shí)驗(yàn)的相關(guān)流程，以及研究人員對(duì)實(shí)驗(yàn)數(shù)據(jù)的管理。

1 系統(tǒng)需求分析及總體設(shè)計(jì)

1.1 需求分析

根據(jù)相關(guān)的圖片誘發(fā)情緒實(shí)驗(yàn)的要求，針對(duì)實(shí)驗(yàn)對(duì)象應(yīng)該無(wú)精神病史、并且視力正常，本系統(tǒng)設(shè)計(jì)色盲測(cè)試、抑郁量表測(cè)試、焦慮量表測(cè)試的功能篩選出滿(mǎn)足要求的實(shí)驗(yàn)對(duì)象；針對(duì)已通過(guò)資格審核的候選對(duì)象需要填寫(xiě)信息并簽署相關(guān)的同意書(shū)，本系統(tǒng)設(shè)計(jì)在線(xiàn)電子簽名的功能；針對(duì)實(shí)驗(yàn)對(duì)象觀看相關(guān)實(shí)驗(yàn)講解視頻的要求，本系統(tǒng)設(shè)計(jì)講解視頻播放的功能；針對(duì)實(shí)驗(yàn)對(duì)象進(jìn)行情緒測(cè)試，本系統(tǒng)設(shè)計(jì)積極消極情緒量表測(cè)試、愉悅度測(cè)試、喚醒度測(cè)試的功能。 其中，愉悅度是指高興或悲傷的程度，范圍是從極端悲傷到極端高興；喚醒度是指身體激活程度，范圍是從極端困倦（如睡眠）到極端激動(dòng)（如高度緊張）；針對(duì)實(shí)驗(yàn)對(duì)象需要對(duì)誘發(fā)情緒的圖片或者音頻進(jìn)行愉悅度、喚醒度的評(píng)分，本系統(tǒng)設(shè)計(jì)圖片誘發(fā)實(shí)驗(yàn)對(duì)象情緒測(cè)試的功能［3］。

本系統(tǒng)還考慮到相關(guān)心理學(xué)研究人員會(huì)對(duì)實(shí)驗(yàn)結(jié)果數(shù)據(jù)進(jìn)行分析和挖掘，設(shè)計(jì)角色權(quán)限管理為研究人員提供管理員的權(quán)限，登錄系統(tǒng)后可查看并管理實(shí)驗(yàn)圖片信息、實(shí)驗(yàn)對(duì)象信息、以及實(shí)驗(yàn)對(duì)象情緒測(cè)試的數(shù)據(jù)信息。

1.2 總體設(shè)計(jì)

在明確了系統(tǒng)需求的基礎(chǔ)上，為高效地完成圖片誘發(fā)情緒的研究實(shí)驗(yàn)，將系統(tǒng)的總體實(shí)現(xiàn)目標(biāo)通過(guò)合理的規(guī)劃與設(shè)計(jì)分為獨(dú)立的、明確的、滿(mǎn)足實(shí)驗(yàn)需求的功能模塊。 系統(tǒng)主要包括4 個(gè)模塊，即：實(shí)驗(yàn)對(duì)象篩選模塊、實(shí)驗(yàn)對(duì)象信息錄入模塊、實(shí)驗(yàn)流程模塊、實(shí)驗(yàn)數(shù)據(jù)管理模塊。

實(shí)驗(yàn)對(duì)象篩選模塊主要負(fù)責(zé)候選對(duì)象進(jìn)行色盲測(cè)試、抑郁量表測(cè)試、焦慮量表測(cè)試；實(shí)驗(yàn)對(duì)象錄入信息模塊主要負(fù)責(zé)實(shí)驗(yàn)對(duì)象的身份信息填寫(xiě)、知情同意書(shū)簽署；實(shí)驗(yàn)流程模塊分為預(yù)備實(shí)驗(yàn)和正式實(shí)驗(yàn)，其中預(yù)備實(shí)驗(yàn)主要負(fù)責(zé)視頻指標(biāo)觀看、情緒測(cè)試，正式實(shí)驗(yàn)主要負(fù)責(zé)圖片誘發(fā)實(shí)驗(yàn)對(duì)象情緒測(cè)試；實(shí)驗(yàn)數(shù)據(jù)管理模塊主要負(fù)責(zé)實(shí)驗(yàn)圖片信息、實(shí)驗(yàn)對(duì)象信息、實(shí)驗(yàn)數(shù)據(jù)信息的管理。 系統(tǒng)框圖如圖1 所示。

圖1 系統(tǒng)框圖Fig. 1 System diagram

2 系統(tǒng)功能模塊設(shè)計(jì)與實(shí)現(xiàn)

2.1 實(shí)驗(yàn)對(duì)象篩選模塊

候選對(duì)象需要通過(guò)3 項(xiàng)資格審核測(cè)試后才能成為正式的實(shí)驗(yàn)對(duì)象，錄入實(shí)驗(yàn)對(duì)象的信息。 其中，3項(xiàng)審核資格的測(cè)試分別為色盲測(cè)試、抑郁量表測(cè)試和焦慮量表測(cè)試。 若3 項(xiàng)測(cè)試均通過(guò)，需要填寫(xiě)身份信息以及簽署知情同意書(shū)；否則，系統(tǒng)將會(huì)提示候選對(duì)象不能參加該實(shí)驗(yàn)。 實(shí)驗(yàn)對(duì)象資格審核流程如圖2 所示。

圖2 資格審核流程圖Fig. 2 Qualification review flow chart

2.2 實(shí)驗(yàn)對(duì)象信息錄入模塊

實(shí)驗(yàn)對(duì)象通過(guò)資格測(cè)試后，需要填寫(xiě)相關(guān)的身份信息，并且簽署本實(shí)驗(yàn)相關(guān)的知情同意書(shū)。 隨著HTML5 的快速發(fā)展，新引入的Canvas 元素也吸引了廣大開(kāi)發(fā)者的關(guān)注。 Canvas 是一個(gè)即時(shí)渲染的矩形區(qū)域畫(huà)布，可以通過(guò)JavaScript 控制在每一個(gè)像素上的繪制，所提供的API 可以在畫(huà)布上繪制各種曲線(xiàn)、形狀、以及文字渲染［4］。 并且，Canvas 具有強(qiáng)大且高效的繪圖特性，無(wú)需第三方插件。 因此，本系統(tǒng)采用了Canvas 技術(shù)通過(guò)鼠標(biāo)操作實(shí)現(xiàn)在線(xiàn)電子簽名的功能，能夠高效、便捷地實(shí)現(xiàn)簽署同意書(shū)的無(wú)紙化操作。

2.2.1 在線(xiàn)電子簽名的筆跡實(shí)現(xiàn)平滑效果

實(shí)驗(yàn)對(duì)象書(shū)寫(xiě)出來(lái)的線(xiàn)條存在鋸齒，平滑度差。究其原因，可表述如下：

（1）Canvas 用lineTo方法連接相鄰的2 個(gè)點(diǎn)，2個(gè)點(diǎn)之間是一條筆直的直線(xiàn)。 因此，鼠標(biāo)采集到的多個(gè)點(diǎn)通過(guò)此方式繪制出來(lái)的是折線(xiàn)。

（2）瀏覽器對(duì)mousemove事件的采集頻率有限，每隔一段時(shí)間才會(huì)對(duì)鼠標(biāo)的坐標(biāo)進(jìn)行采集。 因此，鼠標(biāo)移動(dòng)得越快，采集到的2 個(gè)相鄰點(diǎn)間的距離越遠(yuǎn)，導(dǎo)致線(xiàn)條不平滑，書(shū)寫(xiě)筆跡顯得不美觀。 本系統(tǒng)將實(shí)驗(yàn)對(duì)象書(shū)寫(xiě)的路徑看作是多段折線(xiàn)，利用貝塞爾曲線(xiàn)算法進(jìn)行處理，通過(guò)貝塞爾曲線(xiàn)方程找到每段折線(xiàn)兩端點(diǎn)之間的插值點(diǎn)，再將這些點(diǎn)擬合起來(lái)，形成一條光滑的曲線(xiàn)。

根據(jù)貝塞爾曲線(xiàn)的基本思路，本系統(tǒng)利用貝塞爾曲線(xiàn)方程對(duì)實(shí)驗(yàn)對(duì)象書(shū)寫(xiě)路徑的采集點(diǎn)進(jìn)行了以下處理，以使得實(shí)驗(yàn)對(duì)象書(shū)寫(xiě)筆跡能達(dá)到平滑效果，假設(shè)實(shí)驗(yàn)對(duì)象利用鼠標(biāo)書(shū)寫(xiě)的筆跡為ABCDEFG，書(shū)寫(xiě)筆跡如圖3 所示。 對(duì)此擬展開(kāi)研究分述如下。

圖3 書(shū)寫(xiě)筆跡Fig. 3 Writing handwriting

（1） 實(shí) 驗(yàn) 對(duì) 象 按 下 鼠 標(biāo) 時(shí)， 通 過(guò) 監(jiān) 聽(tīng)mousedown事件采集到起始點(diǎn)為A，實(shí)驗(yàn)對(duì)象松開(kāi)鼠標(biāo)時(shí)，通過(guò)監(jiān)聽(tīng)mouseup事件采集到終止點(diǎn)為G，通過(guò)監(jiān)聽(tīng)mousemove事件采集到鼠標(biāo)經(jīng)過(guò)的點(diǎn)為B、C、D、E、F。

（2）此時(shí)設(shè)置系數(shù)k ＝0.5，在AB上找到一點(diǎn)A1滿(mǎn)足A A1／AB ＝ k，將A A1作為書(shū)寫(xiě)筆跡的一部分。

（3）在BC上找到一點(diǎn)B1滿(mǎn)足BB1／BC ＝k，然后將A1和B1作為2 個(gè)端點(diǎn)，B作為控制點(diǎn)，通過(guò)二次貝塞爾曲線(xiàn)公式計(jì)算后， 繪制出二次貝塞爾曲線(xiàn)A1BB1，并將曲線(xiàn)A1BB1作為書(shū)寫(xiě)筆跡的一部分。

（4） 同樣地，根據(jù)第（2） 步的條件，依次找出C1，D1，E1，F(xiàn)1后，再根據(jù)第（3） 步繪制出各個(gè)線(xiàn)段的二次貝塞爾曲線(xiàn)，都作為書(shū)寫(xiě)筆跡的一部分。

（5）將這些點(diǎn)順滑地連接起來(lái)，即可得到平滑的書(shū)寫(xiě)筆跡。

2.2.2 在線(xiàn)電子簽名的筆跡實(shí)現(xiàn)筆鋒效果

實(shí)驗(yàn)對(duì)象在瀏覽器上通過(guò)鼠標(biāo)操作書(shū)寫(xiě)筆跡時(shí)，無(wú)法像人們?cè)诩垙埳蠈?xiě)字一樣，能夠獲取筆的按壓力度和移動(dòng)速度，在線(xiàn)電子簽名的筆跡沒(méi)有像手寫(xiě)筆跡一樣具有筆鋒的效果， 這樣一來(lái)就顯得不夠美觀。 實(shí)驗(yàn)對(duì)象在瀏覽器上無(wú)法獲得按壓力度，但能通過(guò)畫(huà)筆的移動(dòng)速度來(lái)實(shí)現(xiàn)筆跡粗細(xì)變化的效果，讓在線(xiàn)電子簽名的字體變得更加美觀。 這里對(duì)研究?jī)?nèi)容給出闡釋剖析如下。

（1）Canvas 監(jiān)聽(tīng)mousemove事件，對(duì)實(shí)驗(yàn)對(duì)象書(shū)寫(xiě)移動(dòng)經(jīng)過(guò)的點(diǎn)坐標(biāo)進(jìn)行采集，并記錄當(dāng)前的時(shí)間，保存在數(shù)組中。

（2）利用距離公式和速度公式可求得數(shù)組中兩點(diǎn)（例如A，B點(diǎn)）之間的距離S和速度V。 距離和速度可分別由式（1）、（2） 來(lái)計(jì)算求得：

（3）設(shè)定最大線(xiàn)寬W0，最小線(xiàn)寬W1，最小速度Vmin，增長(zhǎng)線(xiàn)寬Wa，然后通過(guò)如公式（3）、公式（4） 得到A，B兩點(diǎn)的線(xiàn)寬Wc：

（4）畫(huà)線(xiàn)速度越快線(xiàn)條越細(xì)，但畫(huà)線(xiàn)速度越快，所采集的兩點(diǎn)間的距離S越大，因此距離和線(xiàn)寬是成反比的?？梢岳脙牲c(diǎn)間距離S 判斷下一個(gè)點(diǎn)（C點(diǎn)）的線(xiàn)寬Wn與前一個(gè)點(diǎn)（B點(diǎn)）的線(xiàn)寬Wc之間的關(guān)系，關(guān)系有如下3 種，按照對(duì)應(yīng)的方式進(jìn)行繪圖：

①若Wn＞W(wǎng)c時(shí)，將AB這條線(xiàn)段利用一系列的點(diǎn)進(jìn)行補(bǔ)充，補(bǔ)充時(shí)注意點(diǎn)與點(diǎn)之間的距離越小，并且點(diǎn)的半徑越來(lái)越小，直到最小的點(diǎn)的直徑與AB的線(xiàn)寬相等。 這些點(diǎn)的圓心是與AB線(xiàn)寬的垂直中點(diǎn)線(xiàn)保持在同一條水平線(xiàn)上的，繪圖方式1 如圖4 所示。

圖4 繪圖方式1Fig. 4 Drawing mode 1

②若Wn＜Wc時(shí)，將BC這條線(xiàn)段利用一系列的點(diǎn)進(jìn)行補(bǔ)充，補(bǔ)充時(shí)注意點(diǎn)與點(diǎn)之間的距離越小，并且點(diǎn)的半徑越來(lái)越大，直到最小的點(diǎn)的直徑與BC的線(xiàn)寬相等。 這些點(diǎn)的圓心是與BC線(xiàn)寬的垂直中點(diǎn)線(xiàn)保持在同一條水平線(xiàn)上的，繪圖方式2 如圖5 所示。

圖5 繪圖方式2Fig. 5 Drawing mode 2

③若Wn＝Wc時(shí)，保持線(xiàn)寬不變。

2.3 實(shí)驗(yàn)流程模塊

2.3.1 預(yù)備實(shí)驗(yàn)

系統(tǒng)將自動(dòng)播放實(shí)驗(yàn)講解的相關(guān)視頻，實(shí)驗(yàn)對(duì)象可以通過(guò)該視頻了解實(shí)驗(yàn)?zāi)康?、評(píng)價(jià)指標(biāo)以及評(píng)價(jià)示例，而后將開(kāi)始進(jìn)行情緒測(cè)試，其中包含積極／消極情緒量表測(cè)試、愉悅度測(cè)試、喚醒度測(cè)試。

如果大量的實(shí)驗(yàn)對(duì)象同時(shí)觀看講解視頻，瀏覽器將會(huì)向服務(wù)器發(fā)出大量視頻資源的請(qǐng)求，導(dǎo)致了視頻加載的速度過(guò)慢，實(shí)驗(yàn)對(duì)象在觀看講解視頻時(shí)會(huì)出現(xiàn)卡頓、延遲等現(xiàn)象。 目前的相關(guān)視頻播放器都需要安裝Flash 插件應(yīng)用，但Flash 卻存在一定漏洞安全隱患，并且用Flash 解碼視頻非常耗電，運(yùn)行緩慢，容易造成設(shè)備死機(jī)。

HTML5 的出現(xiàn)就是為了減少瀏覽器對(duì)插件應(yīng)用的依賴(lài)程度，減少流媒體播放視頻需要安裝插件的過(guò)程。 HTML5 提供了新的標(biāo)簽和應(yīng)用接口，開(kāi)發(fā)者使用其標(biāo)準(zhǔn)的語(yǔ)句就能實(shí)現(xiàn)豐富的多媒體內(nèi)容的展示。 在HTML5 的標(biāo)準(zhǔn)中包含了更多交互性強(qiáng)的音頻、視頻等可支持離線(xiàn)緩存的應(yīng)用接口［5］。 因此，本系統(tǒng)采用了HTML5 的Video 標(biāo)簽實(shí)現(xiàn)了視頻播放的功能。 其中，Video 標(biāo)簽的preload 屬性可控制視頻是否在頁(yè)面加載時(shí)進(jìn)行加載并預(yù)備播放。 具體實(shí)現(xiàn)代碼如下：

在實(shí)驗(yàn)對(duì)象觀看了講解視頻后，將開(kāi)始進(jìn)行積極／消極情緒量表測(cè)試、愉悅度測(cè)試、喚醒度測(cè)試。本系統(tǒng)采用的是B／S 架構(gòu)，實(shí)驗(yàn)對(duì)象訪(fǎng)問(wèn)各個(gè)測(cè)試界面時(shí)，瀏覽器需要向服務(wù)端傳遞參數(shù)信息以發(fā)送各種請(qǐng)求。 在實(shí)驗(yàn)對(duì)象操作不當(dāng)?shù)那闆r下，瀏覽器不斷地重復(fù)提交請(qǐng)求，而重復(fù)提交的請(qǐng)求會(huì)出現(xiàn)響應(yīng)不及時(shí)，導(dǎo)致服務(wù)器的負(fù)荷過(guò)大［6］。 量表重復(fù)提交的數(shù)據(jù)將會(huì)造成數(shù)據(jù)庫(kù)中的數(shù)據(jù)冗余，數(shù)據(jù)交互和數(shù)據(jù)庫(kù)訪(fǎng)問(wèn)執(zhí)行效率大大降低。 針對(duì)上述問(wèn)題，本系統(tǒng)提出以下具體措施進(jìn)行解決。

（1）利用Lodash.throttle節(jié)流函數(shù)防止量表重復(fù)提交：throttle函數(shù)會(huì)預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)周期。 本文系統(tǒng)采用throttle節(jié)流函數(shù)防止量表在30s內(nèi)進(jìn)行多次提交，實(shí)現(xiàn)代碼具體如下：

（2）利用Session 防止量表重復(fù)提交：實(shí)驗(yàn)對(duì)象訪(fǎng)問(wèn)登錄頁(yè)面時(shí)，根據(jù)需要會(huì)隨機(jī)生成一個(gè)token，并且token 會(huì)被保存在當(dāng)前這次會(huì)話(huà)請(qǐng)求的Session中。 在瀏覽器發(fā)送提交量表的請(qǐng)求時(shí)，通過(guò)瀏覽器頁(yè)面?zhèn)鬟f服務(wù)端生成的token，服務(wù)端在接收到該token 后會(huì)與保存在Session 中的token 進(jìn)行比較，以判斷量表是否重復(fù)提交，并做出相應(yīng)的處理。

2.3.2 正式實(shí)驗(yàn)

實(shí)驗(yàn)對(duì)象將評(píng)價(jià)15 組圖片的愉悅度、離散情緒類(lèi)別（高興、驚奇、生氣、恐懼、悲傷、厭惡、中性），評(píng)價(jià)完畢后。 15 組圖片再次呈現(xiàn)，依次評(píng)價(jià)圖片的喚醒度。 其中，作答時(shí)間不做控制。 每一組結(jié)束后，系統(tǒng)將彈出提示框強(qiáng)制休息至少3 min。 依次評(píng)價(jià)過(guò)15 組圖片后，系統(tǒng)將自動(dòng)彈出“本次實(shí)驗(yàn)結(jié)束”的提示框。

實(shí)驗(yàn)對(duì)象進(jìn)行圖片測(cè)試時(shí)，瀏覽器向服務(wù)器請(qǐng)求大量的圖片資源，加載的圖片越多，服務(wù)器的壓力越大，不僅影響了渲染速度、而且浪費(fèi)帶寬，導(dǎo)致網(wǎng)頁(yè)獲取資源的時(shí)間更長(zhǎng)、效率更低。 為了實(shí)驗(yàn)對(duì)象能夠高效地完成測(cè)試，本系統(tǒng)利用圖片懶加載的方式減輕服務(wù)器的壓力，為實(shí)驗(yàn)對(duì)象提供更好的體驗(yàn)感。 懶加載的處理方式是設(shè)置圖片的延時(shí)加載，在瀏覽器可視區(qū)域外的圖片不會(huì)進(jìn)行加載，當(dāng)頁(yè)面進(jìn)行輪播切換的時(shí)候，將會(huì)加載進(jìn)入瀏覽器可視區(qū)域的圖片。 這樣不僅提高了測(cè)試頁(yè)面加載圖片的速度，而且減少了發(fā)送圖片請(qǐng)求的并發(fā)量，從而減輕了服務(wù)器的壓力［7］。 本系統(tǒng)利用Vue－lazyload 插件對(duì)圖片進(jìn)行懶加載。 具體實(shí)現(xiàn)代碼如下：

＜img class＝＂lazy＂ src ＝＂［占位圖地址］＂ dataoriginal＝＂［真實(shí)url 地址］＂ alt＝＂I＇m an image＂＞

其中，img 標(biāo)簽的屬性src 用一個(gè)空白的透明占位圖來(lái)代替，將圖片真實(shí)的地址放入屬性dataoriginal 中，監(jiān)聽(tīng)瀏覽器的可視化區(qū)域，當(dāng)圖片的位置出現(xiàn)在可視區(qū)域中時(shí)，將src 中的屬性值替換為data－original 的屬性值。

2.4 實(shí)驗(yàn)數(shù)據(jù)管理模塊

通過(guò)角色權(quán)限管理將研究人員設(shè)置為管理員的身份，管理員可以查看圖庫(kù)信息、實(shí)驗(yàn)對(duì)象的信息以及下載實(shí)驗(yàn)對(duì)象各環(huán)節(jié)情緒測(cè)試的數(shù)據(jù)表。 該模塊不僅為研究人員提供圖片篩選的功能，而且能夠?qū)?shí)驗(yàn)對(duì)象的身份信息、實(shí)驗(yàn)對(duì)象的情緒測(cè)試、圖片誘發(fā)實(shí)驗(yàn)對(duì)象情緒測(cè)試的數(shù)據(jù)關(guān)聯(lián)在數(shù)據(jù)表中，提高了研究人員對(duì)數(shù)據(jù)進(jìn)行處理和分析的效率。

本系統(tǒng)采用關(guān)系型數(shù)據(jù)庫(kù)MySQL 來(lái)對(duì)實(shí)驗(yàn)的信息進(jìn)行存儲(chǔ)和管理［8］，所有的數(shù)據(jù)均以關(guān)系型表格存于數(shù)據(jù)庫(kù)。 MySQL 數(shù)據(jù)庫(kù)具有體積小、成本低、速度快的優(yōu)點(diǎn)［9］。 數(shù)據(jù)庫(kù)設(shè)計(jì)的ER（實(shí)體關(guān)系）如圖6 所示。

圖6 數(shù)據(jù)庫(kù)ER 圖Fig. 6 Database ER diagram

3 系統(tǒng)測(cè)試

3.1 實(shí)驗(yàn)對(duì)象篩選模塊的測(cè)試

參與實(shí)驗(yàn)的人員正式申請(qǐng)成為本系統(tǒng)的實(shí)驗(yàn)對(duì)象前需要完成3 項(xiàng)測(cè)試，分別是色盲測(cè)試、抑郁量表測(cè)試和焦慮量表測(cè)試。 3 項(xiàng)測(cè)試頁(yè)面分別如圖7 ～圖9 所示。

圖7 色盲測(cè)試Fig. 7 Color blindness test

圖8 抑郁量表測(cè)試Fig. 8 Depression scale test

圖9 焦慮量表測(cè)試Fig. 9 Anxiety scale test

3.2 實(shí)驗(yàn)對(duì)象信息錄入模塊的測(cè)試

通過(guò)3 項(xiàng)測(cè)試后，將進(jìn)入身份信息填入的界面，實(shí)驗(yàn)對(duì)象需要輸入“用戶(hù)名、聯(lián)系方式、密碼、性別、年齡、學(xué)歷、民族、角色、專(zhuān)業(yè)背景”等基本信息，其中聯(lián)系方式及密碼將作為實(shí)驗(yàn)對(duì)象的賬號(hào)及密碼。身份注冊(cè)頁(yè)面如圖10 所示。

圖10 身份注冊(cè)Fig. 10 Status register

在身份信息填寫(xiě)過(guò)后，需要閱讀實(shí)驗(yàn)相關(guān)的知情同意書(shū)，并簽署自己的名字。 其中，在線(xiàn)電子簽名書(shū)寫(xiě)筆跡優(yōu)化前后的對(duì)比結(jié)果如圖11、圖12 所示。

圖11 優(yōu)化前的書(shū)寫(xiě)筆跡Fig. 11 Handwriting before optimization

圖12 優(yōu)化后的書(shū)寫(xiě)筆跡Fig. 12 Optimized handwriting

3.3 實(shí)驗(yàn)流程模塊的測(cè)試

在實(shí)驗(yàn)對(duì)象登錄頁(yè)面后，實(shí)驗(yàn)對(duì)象開(kāi)始進(jìn)行積極／消極情緒量表的測(cè)試、愉悅度測(cè)試、喚醒度測(cè)試。3 項(xiàng)測(cè)試如圖13～圖15 所示。

圖13 積極／消極情緒量表的測(cè)試Fig. 13 Positive and negative emotion scale

圖14 愉悅度測(cè)試Fig. 14 Pleasure test

圖15 喚醒度測(cè)試Fig. 15 Arousal test

3 項(xiàng)測(cè)試提交以后，本系統(tǒng)將自動(dòng)播放實(shí)驗(yàn)講解視頻，視頻內(nèi)容包括實(shí)驗(yàn)?zāi)康?、評(píng)價(jià)指標(biāo)、評(píng)價(jià)示例。 講解視頻界面如圖16 所示。

圖16 講解視頻Fig. 16 Interpretation of the video

視頻播放后，實(shí)驗(yàn)對(duì)象可以正式開(kāi)始圖片誘發(fā)情緒測(cè)試實(shí)驗(yàn)，正式實(shí)驗(yàn)如圖17 所示。

圖17 正式實(shí)驗(yàn)Fig. 17 Formal experiment

3.4 實(shí)驗(yàn)數(shù)據(jù)管理模塊的測(cè)試

研究人員在登錄系統(tǒng)后會(huì)通過(guò)角色權(quán)限管理的認(rèn)證，進(jìn)入管理員的界面。 該管理界面能進(jìn)行實(shí)驗(yàn)圖片審核、實(shí)驗(yàn)數(shù)據(jù)表下載以及實(shí)驗(yàn)對(duì)象信息管理。詳情如圖18～圖20 所示。

圖18 實(shí)驗(yàn)圖片審核Fig. 18 Review of experimental pictures

圖19 實(shí)驗(yàn)數(shù)據(jù)表下載Fig. 19 Experimental data sheet download

圖20 實(shí)驗(yàn)對(duì)象信息表Fig. 20 Table of subject information

3.5 系統(tǒng)響應(yīng)速度測(cè)試

在高并發(fā)量的訪(fǎng)問(wèn)環(huán)境下，最大限度需要容納3000人同時(shí)訪(fǎng)問(wèn)系統(tǒng)，為保證實(shí)驗(yàn)過(guò)程中系統(tǒng)的穩(wěn)定性，利用Apache 開(kāi)發(fā)的Jmeter 軟件進(jìn)行系統(tǒng)的壓力測(cè)試［10］。 服務(wù)器處理器為Intel（R） Core（TM） i5－6500 CPU ＠ 3.20 GHz 3.20 GHz，內(nèi)存為12 GB，系統(tǒng)版本為Windows10 專(zhuān)業(yè)版，瀏覽器為Google Chrome。 采用Jmeter 啟動(dòng)3000 個(gè)線(xiàn)程，向系統(tǒng)發(fā)起請(qǐng)求，測(cè)試結(jié)果見(jiàn)表1。 由表1 可知，系統(tǒng)的吞吐量為正常水平，且錯(cuò)誤率為0%，通過(guò)這些指標(biāo)可以看出該系統(tǒng)的性能滿(mǎn)足3000 人進(jìn)入實(shí)驗(yàn)的要求。

表1 系統(tǒng)壓力測(cè)試表格Tab. 1 System pressure test form

4 結(jié)束語(yǔ)

本文針對(duì)現(xiàn)有的心理學(xué)實(shí)驗(yàn)研究中軟件系統(tǒng)的不足，運(yùn)用B／S 架構(gòu)設(shè)計(jì)并開(kāi)發(fā)了圖片誘發(fā)情緒實(shí)驗(yàn)研究的系統(tǒng)，能夠?qū)崿F(xiàn)在互聯(lián)網(wǎng)上進(jìn)行圖片誘發(fā)情緒實(shí)驗(yàn)的相關(guān)流程，利用HTML5 的Canvas 技術(shù)實(shí)現(xiàn)了在線(xiàn)電子簽名的功能，并且根據(jù)圖片情緒測(cè)試實(shí)驗(yàn)的流程實(shí)現(xiàn)了講解視頻的播放、情緒測(cè)試、圖片誘發(fā)情緒測(cè)試等功能。 該系統(tǒng)具有輕量級(jí)、可移植性高、跨平臺(tái)性能好和交互性強(qiáng)等優(yōu)點(diǎn)，對(duì)于心理學(xué)研究人員分析情緒特性有很大的幫助。