經過前面這麼多天的努力，今天我們終於要完成尤拉線證明的教學網頁範例。

安裝投影片內容

我們將證明過程分成四頁詳細寫下，並且將每頁的內容安裝至昨天完成的投影片範例，我們在最後的今天程式碼連結中重新給一個開始程式碼提供練習，這邊只提供第一頁的HTML內容來說明之後的步驟。

<ol>
    <li>
      以\(O~\)為圓心作\( \triangle ABC~\)的外接圓。
    </li>
    <li>
      作射線\(AO~\)交\(\triangle{ABC~}\)外接圓於\(D\)。
    </li>
    <li>
      連接
      \(\overline{CH}\)、
      \(\overline{CD}\)、
      \(\overline{BD}~\)和
      \(\overline{BH}\)。
    </li>
  </ol>

由於我們使用Mathjax，並且做了簡單的CSS碼排版，證明的第一頁呈現畫面如下。

文字按鈕與監聽處理

我們希望按下「外接圓」這三個字時，左邊的JSXGrpah的畫板中就會顯示三角形ABC的外接圓。我們做如下的封包。

<a href="#" class="button" data-ele="circleC"><span>外接圓</span></a>

我們在標籤a埋了一個data-ele的屬性，它的屬性值設定為按下後要顯示的JSXGraph相對應幾何元素；我們在每個想做相同功能的文字上做一樣的處理，把所有具有這種屬性的DOM集合成一e.ementRefs的Node list。然後我們在Javascript中配置一個JSXGraph幾何元素矩陣jsxElements和物件矩陣geometryElements，geometryElements的物件元素配置如程式碼所列。

const elementRefs = document.querySelectorAll('a[data-ele]') //證明內容中可以按下的幾何元素，用<a><span>幾何元素名稱</span></a>
const jsxElements = { circleC, segmentBD, pointD, segmentCH, segmentCD, segmentBD, segmentAD, segmentBH, angleDBA, angleACD, midpointAB, segmentCM, segmentOM, segmentOH, arrowAO, pointGPrime }
const geometryElements = []
// 建構geometryElements陣列中每個幾何元素和DOM elementRefs的關聯
elementRefs.forEach(ref => {
  const obj = {
    dataset: ref.dataset.ele, //幾何元素的名字
    domRef: ref, //相關的DOM
    jsx: jsxElements[ref.dataset.ele], //相關的JSX畫板上的幾何元素
    jsxShown: false //是否顯示相關的JSX畫板上的幾何元素
  }
  geometryElements.push(obj)
})

接著我們再每個geometryElements內的物件元素監聽click並執行回呼函式handleGeometryElementClick，程式碼如下：

geometryElements.forEach(ele => ele.domRef.addEventListener('click', handleGeometryElementClick))

function handleGeometryElementClick() {
  const ele = geometryElements.find(ele => ele.dataset === this.dataset.ele)
  ele.jsxShown = ~ele.jsxShown
  if (ele.jsxShown) {
    ele.domRef.classList.add('click')
  } else {
    ele.domRef.classList.remove('click')
  }
  ele.jsx.setAttribute({ visible: ele.jsxShown })
}

如此便不用每一個按鈕做一次監聽，而且，如果以後想新增按鈕，只需在jsxElements陣列中加入要顯示的幾何元素，並在HTML的部分將「文字按鈕」如下包覆就可以了。

<a href="#" class="button" data-ele="幾何元素名"><span>文字按鈕</span></a>

組裝完成

最後將之前做好的正面觀察中線、中垂線、高、重心、外心、垂心和尤拉線…等的按鈕裝上，我們的第一個完整的教學網頁就完成了。

今日程式碼連結

• 開始程式碼

• 完成程式碼

今日小結

經過十三天的努力，終於完成了一份完整的教學網頁，真是辛苦。雖然過程很辛苦，但是以後有關幾何的證明教學，只要利用JSXGraph先將圖畫好，再將證明敘述寫在投影片相對應的HTML標籤內，再如上製作按鈕標籤，很快就可以完成一個證明教學網頁，大大降低開發時間。所謂「萬事起頭難」最符合軟體開發的程序，將重複的工作程式化，畢其功於一役就是如此。明天會有令人驚喜的彩蛋，明天見！