---
tags: 公益程式體驗營 - 2022
---
# 第四週小組任務

使用 discord、ZOOM 來討論，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論，解答此問題集

**回報流程：**
1. 請組長到下方回報解答連結，**一個小組請派一人提交(依據當周條件提交)**。回報內容需含：
1. 該問題集的答案
2. 提供 1~3 張 discord 或 ZOOM 對話截圖，確保有進行小組討論
3. 組員參與名單
2. 助教檢視過後，就會回覆 ✅ 來回報審核成功與否。

**常見問題：**
Q：約時間討論的組員至少要幾位？
A：至少兩位就可成團！

Q：如果沒有分組，可以一起玩嗎？
A：可以

## 問題

### 第一題 jQuery 小技巧

請使用 jQuery 的 `toggleClass` 語法嘗試在點擊 `.list-item` 時加上 `.active`，再次點擊時會取消 `.active` 樣式

以下是版型程式碼：

### HTML

<ul class="list">
  <li class="list-item list-title">甜點類別</li>
  <li class="list-item"><a class="list-link" href="#">所有甜點（48）</a></li>
</ul>

### CSS

a {
  text-decoration: none;
}
.list {
  width: 300px;
  text-align: center;
}

.list-title {
  font-size: 24px;
  background: #3F5D45;
  color: #EAF0ED;
  padding: 16px 0;
}

.list-item {
  border: 1px solid #EAF0ED;

}

.list .active {
  background: #EAF0ED;
}

.list-link {
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  color: #3F5D45;
  display: block;
  padding: 16px 0;
}

### 第二題 方案選擇

請參考 [體驗營專屬快閃活動](https://chalk-freedom-ec6.notion.site/3-a74b3d7c7aad48c888a2bfc6fb871e34) 和小組組員討論會比較想要選哪個方案，或是歡迎小組一起參加切版班繼續被虐 (欸

### 回報

1. 將討論結果整理成一個 HackMD，填寫到下方回報區
2. 到此 [discord](https://discord.com/channels/801807326054055996/964349033390960640/970597563264806943) 回報下方範例文：

> 老師助教好，回報一下體驗營第零組已經完成小組任務嘍！

---

## 回報區(看看哪組的行動力最高！)

回報範例：

無組別 / 穎旻
[小組任務連結 hackMD 傳送門](https://)
> 助教：✅

| 編號 | 組別 | HACKMD | 助教：✅ 👍 |
| ---- | ------ | ----------------------------------------------------- | ----------- |
| 1 | 第七組 | [HACKMD](https://hackmd.io/bdRoC4DXSFqwv47iBxtfzw) | |
| 2 | 第23組 | [HACKMD](https://hackmd.io/3XgrZNMtSgWw7CqNX78UEQ?view)| |
| 3 | 第24組 | [HackMD](https://hackmd.io/@jiangscodenote/r1ucq3x_c) | |
| 4 | 第4組 | [HackMD](https://hackmd.io/20vyj039Qvq3skV5l35RkA) | |
| 5 | 第22組 | [HateMOD](https://hackmd.io/lQSAjqTxTQ2C_G0PRrJDyA) | |
| 6 | 第25組 | [HateMOD](https://hackmd.io/q2VRm-PaT5O8Lp-9zXZNCw?view) | |
| 7 | 第2組 | [HateMOD](https://hackmd.io/HFT2jP4UQKiAzz21qcVAHw) | |
| 8 | 第44組 | [HACKMD](https://hackmd.io/@6rQMVv62RiSpAaKQfBZ4Rw/ByBE3P88c) | |