# 活動案
有以下類型：
- Radio check
- Box check
- text文字紀錄
- 首頁傳值
- 計算測驗結果(分數加總、取值加1、單純取值)
- 送出後跳POP
- HttpRequest
### 接案流程

st=>start: 拿到設計檔
e=>end: 結案
op=>operation: KAD開後台表單欄位
op2=>operation: 寫測驗邏輯、表單防呆
op3=>operation: 串API
cond=>condition: 後台資料是否正確？

st->op->op2->op3->cond
cond(yes)->e
cond(no)->op3

## 經典款(純表單)
> [美廉社](https://kad.events.104-dev.com.tw/180821_simplemart_hr/index.html)

1. 操作DOM

function getName(name){
  let myName = document.getElementsByName(name)[0];
  return myName;
}

2. 防呆機制

//引入ValidationUtil.js，已有寫好的機制
if(!getName('notify').checked){
  errAlert = "請確定已詳讀個資保護聲明\n" + errAlert;
}

if(getName('area').value == ''){
  errAlert = "您忘了填寫預計加盟區域\n" + errAlert;
}

if(getName('email').value == ""){
  errAlert = "您忘了填寫電子郵件信箱\n" + errAlert;
} else if (!FnValid.isEmail(getName('email').value)){
  errAlert = "電子郵件信箱格式錯誤，請填正確的EMAIL\n" + errAlert;
}

if(getName('phone').value == ""){
  errAlert = "您忘了填寫手機\n" + errAlert;
}else if(!FnValid.isCellPhoneTen(getName('phone').value)){
  errAlert = "手機格式錯誤，請填手機號碼\n" + errAlert;
}
if(getName('name').value == ""){
  errAlert = "您忘了填寫姓名\n" + errAlert;
}else if(!FnValid.isValidName(getName('name').value.replace(/\ /g,''))){errAlert = "姓名格式錯誤，請填中文或英文\n" + errAlert;
  }
}

3. HttpRequest

if(errAlert != ""){
  alert(errAlert);
}else{	
  fnLoaderShow();
  let xhr = new XMLHttpRequest();
  let resultValue = 'CustomId=130000000119876&Event=180821SimplemartHr' + '&name=' + getName('name').value + '&phone=' + getName('phone').value + '&email=' + getName('email').value + '&area=' + getName('area').value;

  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      let resultValue = xhr.responseText.trim();
      resultValue = JSON.parse(resultValue);
      if(resultValue.success){
        fnLoaderHide();
        alert('送出完成！');
        window.location.href = 'index.html';
      } else {
        fnLoaderHide();
        alert('送出失敗，請重新填寫！');
        window.location.href = 'index.html';
      }
    }
  };
  xhr.open('POST', '/api/addMessage');
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send(resultValue);
  }
}

### 總覺得哪裡不好閱讀
:::warning
這是...(W*F):astonished:

let resultValue = 'CustomId=130000000119876&Event=180821SimplemartHr' + '&name=' + getName('name').value + '&phone=' + getName('phone').value + '&email=' + getName('email').value + '&area=' + getName('area').value;

優化一下

let resultObj = {
  'CustomId': '86142443000',
  'Event': '190923LccnetMp',
  'schoolCode': classArea[1],
  'source': '1',
  'reason': 'https://kad.events.104.com.tw/190923_lccnet_mp/index.html',
  'item': '3',
  'adCode': '37451',
  'name': checkID('name').value,
  'phone': checkID('phone').value,
  'class_info': checkID('class_info').value,
  'city': checkID('city').value,
  'class_area': classArea[0],
  'message': boxCheck().ans
}
  let resultKeys = Object.keys(resultObj);
  let resultValue = Object.values(resultObj);
  let resultDone = '';
  for(let i = 1; i < resultKeys.length; i ++){
    resultDone += '&' + resultKeys[i] + '=' + resultValue[i];
}
resultDone = resultKeys[0] + '=' + resultValue[0] + resultDone;

:::
## 計算測驗結果(Box check+取值加1)
> [巨匠電腦-你適合吃哪行飯](https://kad.events.104-dev.com.tw/190906gjun/question.htm)

1. 取值+1

let qArr = document.getElementsByName(name);
let check = false;
let checkAdd = 0;
let checkBoxValue = '';
let ansObj = {
  A: 0,
  B: 0,
  C: 0,
  D: 0,
  E: 0
};
  
for(let firstAns = 0; firstAns < qArr.length; firstAns++){
  if(qArr[firstAns].checked){
    check = true;
    checkAdd ++;
    checkBoxValue = qArr[firstAns].value;
    let checkBoxArr = checkBoxValue.split(',');
    for(let secondAns = 0; secondAns < checkBoxArr.length; secondAns++){
      ansObj[checkBoxArr[secondAns]]++;
    }
  }
}

2. 導結果頁

if(ans == 'A'){
  return {'check': check, 'checkAdd': checkAdd, 'ans': '社交型—建議加強簡報及圖表分析', 'resultPage': 'an01.htm'}
} else if (ans == 'B'){
  return {'check': check, 'checkAdd': checkAdd, 'ans': '直覺型—建議加強多媒體設計、商業插畫設計', 'resultPage': 'an02.htm'}
} else if (ans == 'C'){
  return {'check': check, 'checkAdd': checkAdd, 'ans': '親和型—建議加強辦公室應用軟體', 'resultPage': 'an03.htm'}
} else if (ans == 'D'){
  return {'check': check, 'checkAdd': checkAdd, 'ans': '嚴謹型—建議加強大數據、物聯網、雲端網路管理', 'resultPage': 'an04.htm'}
} else if (ans == 'E'){
  return {'check': check, 'checkAdd': checkAdd, 'ans': '藝術型—建議加強響應式網頁設計、3D多媒體、影視特效', 'resultPage': 'an05.htm'}
} else {
  return {'check': check, 'checkAdd': '', 'ans': '', 'resultPage': ''}
}

## 計算測驗結果(Radio check+分數加總)
> [聯成電腦-職場歌喉讚](https://kad.events.104-dev.com.tw/190909_lccnet_mp/index.html)

1. radio check

function radioCheck(name){
  let radioArr = document.getElementsByName(name);
  let checked = false;
  let checkedValue = 0;
  
  for(let i = 0; i < radioArr.length; i++){
    let radioValue = Number(radioArr[i].value);
    if(radioArr[i].checked === true){
      checked = true;
      checkedValue = radioValue;
      return {'checked': checked, 'checkedValue': checkedValue};
    }
  }
  return checked;
}

2. 分數加總

function sum(){
  let sumNum = 0;
  for(i = 1; i <= 3; i++){
    if(radioCheck('q' + i).checkedValue == '1'){
      sumNum += 1;
    }
  }
  if(sumNum == 0 || sumNum == 1){
    return{result: '穩定力', resultPage: 'pop-ans1'}
  }else if(sumNum == 2){
    return{result: '藝術力', resultPage: 'pop-ans2'}
  }else if(sumNum == 3){
    return{result: '邏輯力', resultPage: 'pop-ans3'}
  }
}

### 同場加映
最近的新需求:arrow_right:**結果頁導在POP裡**
:::warning
#### 首先(style.css)

.overlay-js {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("../img/overlay.png");
  z-index: 99999;
}

#### 再來

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
    let resultValue = xhr.responseText.trim();
    resultValue = JSON.parse(resultValue);
    
    let resultPop = document.getElementById(sum().resultPage);
    if(resultValue.success){
      fnLoaderHide();
      alert('送出完成！');
      resultPop.style.display = 'block';
      resultPop.addEventListener('click', close);
    } else {
      fnLoaderHide();
      alert('送出失敗，請重新填寫！');
      window.location.href = 'index.html';
    }
  }
};

#### 最後

function close(){
  let closePop = document.getElementById(sum().resultPage);
  closePop.removeAttribute('style');
  window.location.href = 'index.html';
}

:::
## text文字紀錄
> [人資講座-雇主品牌](https://kad.events.104-dev.com.tw/isha/190628_kad_rwd/index.html)

有點複雜，需要回憶一下
1. 先看Html

<div class="col-12 mb-3">
  <div class="row">
    <div class="col">
      <label for="formGroupExampleInput"><i class="fa fa-caret-right"></i>您在招募上遇到什麼問題呢？(可複選)</label>
    </div>
    </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="inlineCheckbox1" value="找不到對的人才">
    <label class="form-check-label" for="inlineCheckbox1">找不到對的人才</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="inlineCheckbox1" value="不知透過什麼管道最有效">
    <label class="form-check-label" for="inlineCheckbox2">不知透過什麼管道最有效</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="inlineCheckbox1" value="不知道如何經營雇主品牌">
    <label class="form-check-label" for="inlineCheckbox3">不知道如何經營雇主品牌</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" name="inlineCheckbox1" value="不清楚公司品牌的優勢">
    <label class="form-check-label" for="inlineCheckbox4">不清楚公司品牌的優勢</label>
  </div>
  <div class="form-check form-check-inline w-100">
    <input class="form-check-input" type="checkbox" name="inlineCheckbox1" value="其他">
    <label class="form-check-label w-100" for="inlineCheckbox5">其他<input type="text" class="form-control ml-2 other-input" name="inlineCheckbox1Input">  </label>
  </div>
</div>

2. checkBox + input判斷

function boxCheckInput(){
  let chkArr = document.getElementsByName('inlineCheckbox1');
  let chk = false;
  let checkText = [];
  let inlineCheckbox1Input = document.getElementsByName('inlineCheckbox1Input')[0];
  for(i = 0; i < chkArr.length-1; i ++){
    if(chkArr[i].checked === true){
      chk = true;
      checkText.push(chkArr[i].value);
      checkText.join('、');
    }
  }
  if(chkArr[4].checked === true && inlineCheckbox1Input.value != ''){
    checkText.push('其它:' + inlineCheckbox1Input.value);
    checkText.join('、');
  }
  return {chk: chk, checkText: checkText};
}

## 首頁傳值
> [聯成電腦-你的幸運之門是哪道？](https://kad.events.104-dev.com.tw/190819_lccnet_mp/index.html)

1. Location assign

function firstAns(){
  let q0Array = document.getElementsByName('q0');
  let qUrl = '';
  for(let i = 0; i <= q0Array.length; i ++){
    if(q0Array[i].checked){
      qUrl = 'question.html?' + 'q0Ans=' + q0Array[i].value;
      return window.location.assign(qUrl);
    }
  }
}

function openAlert(){
  alert('請點選你最想開啟的大門！');
}

2. 接值

function getUrlText(){
  let myUrl = location.href;
  let parameterStr = myUrl.split('?')[1];
  let parName = parameterStr.split('=')[1];
  return {'parName': parName};
}

3. 計算答案

var oForm = document.form1;
var finalAns = getUrlText().parName;
var ansObj = {
  1: 0,
  2: 0,
  3: 0,
  4: 0,
}
for (var i = 1; i <= 4; i++) {
  if (radioCheck('q' + [i]).checked.value !== '0') {
    ansObj[oForm['q' + i].value]++;
  }
}

if(finalAns == 1){
  ansObj['1']++;
} else if(finalAns == 2){
  ansObj['2']++;
} else if(finalAns == 3){
  ansObj['3']++;
} else {
  ansObj['4']++;
}

# KADesign
先看目前的介面
- [KAD靜態頁上傳介面](http://private.events.104-dev.com.tw/design)
### 為什麼要做？
> **近程3大目標**
- 幫助設計師 ~~工程師~~ 簡化工作流程
- 實現設計師更便利的觀測GA數據
- 縮短設計師製稿日程
> **遠程目標**
- 希望借助上述三合一力量，提升產值、增加營業額、大家發大財！
:::success
[直接看Zeplin](https://app.zeplin.io/project/5d3fa29ed3baa14bfca1f163)
:::
# 職涯成長(Nabi)
- [線上](https://learn.104.com.tw/nabi/personal/2007001004/QyM=/video)

st=>start: 以上
e=>end: 回PPT

st->e