result_diagram.widget

圖 4.11 系統結果圖

這邊要談談我們要怎麼分析並且將結果圖顯示出來，在這個 widget 中，我 們必須輸入 SVG 的標籤來畫出我們需要的幾何圖形，並且使用內建的 SMIL

（Synchronized Multimedia Integration Language）來製作動畫。

l widget 位置：輔導社工專用電子書。

l 功用：系統分析問卷資料，並且編排成結果圖的方式，讓輔導社工一目瞭然。

l 說明：我們需要先用 javascript 分析資料，然後再將結果圖產生變化。

以下是 SVG 的畫圖部分程式碼：

<g id="topGroup" transform="translate(450, 50) scale(0.7, 0.7)" >

<circle id="middleBackCircle" cx="100" cy="100" r="170"

fill="white" stroke-width="3" stroke="blue" />

<circle id="middleTopCircle" cx="100" cy="0" r="70" fill="red"

stroke-width="3" stroke="black" />

<circle id="middleDownCircle" cx="100" cy="200" r="70" fill="red"

stroke-width="3" stroke="black" />

<circle id="middleLeftCircle" cx="0" cy="100" r="70" fill="red"

stroke-width="3" stroke="black" />

<circle id="middleRightCircle" cx="200" cy="100" r="70" fill="red"

stroke-width="3" stroke="black" />

<!-- text -->

<text x="80" y="9" dx="0" fill="black" font-size="20"

font-weight="bold" >發展</text>

<text x="-40" y="109" dx="0" fill="black" font-size="20"

font-weight="bold" >自我抉擇</text>

<text x="170" y="109" dx="0" fill="black" font-size="20"

font-weight="bold" >一致性</text>

<text x="70" y="200" dx="0" fill="black" font-size="20"

font-weight="bold" >社會化</text>

</g>

以上只貼出了一部分的程式碼，全部標出來會太長，這部份我們可以看見這 是畫出結果圖裡面，上面一個大圓圈包含了四個小圓圈的部份，為了可以整體改 變屬性，先用一個<g>標籤將整個大圓圈包含小圓圈都包起來，當我們想要同時 對這五個圓圈有什麼屬性上的變動，只要更動<g>標籤裡的屬性就好。

然後使用<circle>標籤畫出圓圈，cx, cy 的屬性給出了圓圈左上角在整張 畫布裡的位置，r 屬性給出了這個圓圈的半徑長短，在 fill 屬性當中我們定義了 這個圓圈是什麼顏色，stroke-width 定義了畫出這個圓圈的外框有多粗，並且 stroke 定了這個外框是什麼顏色。

在文字方面用<text>標籤來定義，x, y 屬性定義了這段文字的左上角會是

在這張畫布的哪個位置，dx 屬性指的是這個文字在 x 軸的位移量，fill 定義了 這段文字的顏色，font-weight 定義了它是粗體字。

在畫完 2D 圖案之後，我們需要對這些 2D 圖形加上動畫，我們使用 SMIL 標 籤，程式碼如下：

<animateTransform xlink:href="#topGroup" attributeName="transform"

type="translate" begin="b3.click" from="450, 50" to="100, 150" dur="2s"

fill="freeze" />

<animate xlink:href="#topGroup" attributeName="opacity"

values="1;1" begin="b3.click" dur="0s" fill="freeze" />

<animate xlink:href="#downGroup" attributeName="opacity"

values="1;0" begin="b3.click" dur="2s" fill="freeze" />

<animate xlink:href="#rightGroup" attributeName="opacity"

values="1;0" begin="b3.click" dur="2s" fill="freeze" />

<animate xlink:href="#leftGroup" attributeName="opacity"

values="1;0" begin="b3.click" dur="2s" fill="freeze" />

在<animateTransform>標籤當中，定義了物件的位移移動，使用 xlink-href 來綁定作用物件，type 定義了我們要做什麼樣的動作，旋轉（rotate）或是位移

（translate），begin 定義了我們要怎麼來觸發此動畫，讓這個物體從（from）

到（to）哪個位置，並且歷時（dur）了多久的時間，fill 設定為 freeze 表示在 這個動畫結束以後，物體會固定在最後呈現的樣子，不會回到初始狀態。

再來我們需要讀取輔導個案的回答資料，並且分析，再讓分析完的資料對結 果圖產生影響。程式碼如下：

var sencode_factor = new Array('6', '3', '4', '2', '1', '2', '3', '3',

'2', '3', '1', '1', '2', '2');

var result = new Array();

var index = 1;

for(var i=0; i< sencode_factor.length; ++i) {

var max_index = parseInt(index) + parseInt(sencode_factor [i]);

for(var j=index; j<max_index; ++j) {

var sum = 0;

eval(‘sum += parseInt(localStorage.quesNum’+index+')');

result[i] = (sum/ sencode_factor [i]);

}

index = max_index;

}

在 sencode_factor 這個陣列中儲存的是，每一種次因素有幾題，比如說第 一種次因素有六題，那麼 sencode_factor[0]就儲存 6，然後我們使用兩層迴圈，

來計算每一種次因素當中，輔導個案所得分數的平均值是多少。