論前端工程師如何應對西電教學評估系統

時間 2019-11-07

標籤前端工程師如何應對電教評估系統简体版

原文原文鏈接

0x00. 更新

隔了一年多了，一直打算把這個插件再完善一下,這不花了點時間重構了一下。此次更新使你們能夠在教學評估列表頁（就是那個有不少老師的頁面）一鍵進行評教了。javascript

可是你必須在每次評教完成彈出評估完成時按一下回車，這點讓強迫症很難受啊（逃css

0x01. 前言

這幾天又要進行教學評估了，原本吧可能出於「爲了教學質量 」這種神聖重要而高貴的目的(姑且這麼認爲吧 :))，可是可是你網站作得那麼搓就是你的錯了。選一個老師的按鈕那麼小，你是要誰點；選優良中的按鈕那麼小，你是要誰點，關鍵是隻能點 radio，點擊文字倒是沒有用的，這就讓人忍不了了。做爲一個前端工程師，怎麼可以忍受這種「奇恥大辱」，因而決定試一試，沒想到還真成功了，也就方便了許多。html

0x02. 快速開始

若是你只是想要快速進行教學評估而不想使用插件的話，能夠在瀏覽器中按下 F12 打開控制檯，輸入下面這段代碼並按下回車，你會發現一切都會自動進行。記得要在 教學評估列表頁（就是那個有不少老師的頁面）呦。前端

控制檯

在瀏覽器中按 F12 會出現下圖這樣的東西，點擊 console 進入控制檯。java

執行

複製下面的代碼，敲擊回車即可快速填選。git

var CONFIG = {
  optionsRate: [8, 1, 0, 0],  // 每次評教的四個選項的比例
  comments: [  // 主觀評價，評價時會隨機選擇
    '課程內容很充實，教師教學很風趣。',
    '不夠有趣',
    '老師很好！教得賊棒了!',
    '不錯不錯',
    '好老師',
    '真是一門好課啊！很喜歡呢~',
    '但願加油！'
  ]
}

start()

// 開始腳本
function start(data) {
  evaluateAuto()
  window.frames['bottomFrame'].document.querySelector('[name=mainFrame]').onload = evaluateAuto
}

// 自動評教
function evaluateAuto () {
  var mainFrame = window.frames['bottomFrame'].frames['mainFrame']
  var btnEle = mainFrame.document.querySelector('img[title=評估]')

  if(mainFrame.document.querySelectorAll('.fieldsettop .titleTop3')[1]) { // 評教頁
    evaluate(mainFrame)
  } else if (btnEle) {  // 列表頁
    btnEle.click()
  } else if(mainFrame.document.querySelector('img[title=查看]')) {
    window.frames['bottomFrame'].document.querySelector('[name=mainFrame]').onload = null
    alert('已所有評教')
  } else {
    window.frames['bottomFrame'].document.querySelector('[name=mainFrame]').onload = null
    console.log('請在教學評估頁使用')
  }
}

// 評教
function evaluate (mainFrame) {
  var comment = CONFIG.comments[parseInt(Math.random() * CONFIG.comments.length)]
  var optionsRate = CONFIG.optionsRate

  // 全部選項 Node
  var optionsEles = mainFrame.document.querySelectorAll('.fieldsettop .titleTop3')[1].querySelectorAll('#tblView table tr:nth-child(even) > td')

  // 主觀評價 Node
  var subjectiveEles = [optionsEles[optionsEles.length - 1].querySelector('textarea'), mainFrame.document.querySelectorAll('.fieldsettop .titleTop3')[2].querySelector('textarea')]

  // 提交 Node
  var submitBtn = mainFrame.document.querySelector('[title=提交]')

  // 隨機選擇
  for(var i = 0, optionIndex = 0; i < optionsEles.length - 1; i++) {
    optionIndex = getRandomOption(optionsRate)
    optionsEles[i].querySelectorAll('input')[optionIndex].checked = true
  }

  // 填充主觀評價
  commentsFill(subjectiveEles, comment)

  // 提交評價
  submitBtn.click()
}

// 按照比例獲取隨機選項
function getRandomOption (optionsRate) {
  optionsRate = optionsRate || [1, 1, 1, 1]
  var rateSum, random, index, sum, i;

  for(i = 0, rateSum = 0; i < optionsRate.length; i++) {
    rateSum += parseInt(optionsRate[i])
  }

  random = Math.ceil(Math.random() * rateSum)

  for(i = 0, sum = 0; i < optionsRate.length; i++) {
    sum += optionsRate[i]
    if(random <= sum) {
      return i
    }
  }

  return 0
}

// 填充評論框
function commentsFill (eles, comment) {
    for(var i = 0; i < eles.length; i++) {
    eles[i].value = comment
  }
  return i
}