diff --git a/package-lock.json b/package-lock.json
index 4351ee5..9528bca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1291,6 +1291,12 @@
 				"@types/range-parser": "*"
 			}
 		},
+		"@types/geojson": {
+			"version": "7946.0.8",
+			"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+			"integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+			"dev": true
+		},
 		"@types/glob": {
 			"version": "7.1.4",
 			"resolved": "https://registry.nlark.com/@types/glob/download/@types/glob-7.1.4.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fglob%2Fdownload%2F%40types%2Fglob-7.1.4.tgz",
@@ -1322,6 +1328,15 @@
 			"integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
 			"dev": true
 		},
+		"@types/leaflet": {
+			"version": "1.7.9",
+			"resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
+			"integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
+			"dev": true,
+			"requires": {
+				"@types/geojson": "*"
+			}
+		},
 		"@types/mime": {
 			"version": "1.3.2",
 			"resolved": "https://registry.nlark.com/@types/mime/download/@types/mime-1.3.2.tgz",
diff --git a/package.json b/package.json
index 5de4eeb..32c7f3a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"vuex": "^4.0.0-0"
 	},
 	"devDependencies": {
+		"@types/leaflet": "^1.7.9",
 		"@vue/cli-plugin-babel": "~4.5.0",
 		"@vue/cli-plugin-eslint": "~4.5.0",
 		"@vue/cli-plugin-router": "~4.5.0",
diff --git a/src/components/GameContent.vue b/src/components/GameContent.vue
index 254a0e5..9242af0 100644
--- a/src/components/GameContent.vue
+++ b/src/components/GameContent.vue
@@ -4,6 +4,7 @@
     <div class="content" v-if="whichQuestion === item">
       <GameTaskA
         v-if="!isTaskACompleted"
+        :shouldShowNewFilter="shouldShowNewFilter"
         :which-question="whichQuestion"
         :identify-land-usage="identifyLandUsage"
         :params-of-maps="paramsOfMaps"
@@ -11,6 +12,7 @@
       />
       <GameTaskB
         v-else
+        :shouldShowNewFilter="shouldShowNewFilter"
         :which-question="whichQuestion"
         :params-of-maps="paramsOfMaps"
         :land-usage="landUsage"
@@ -23,6 +25,7 @@
 </template>
 
 <script>
+
 import axios from 'axios';
 import haversineOffset from 'haversine-offset';
 import { mapActions, mapState } from 'vuex';
@@ -30,6 +33,51 @@ import GameTaskA from './GameTaskA.vue';
 import GameTaskB from './GameTaskB.vue';
 import LoadingPage from './LoadingPage.vue';
 
+const DATA_FOR_AB_TESTING = [
+
+  {
+    latitude: '23.99810304',
+    longitude: '120.6448603',
+    location_id: 0,
+    address: '南投縣草屯鎮石川里新光段1556地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.45363464',
+    longitude: '120.7812774',
+    location_id: 1,
+    address: '苗栗縣銅鑼鄉樟樹村雙峰山段49地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.05429213',
+    longitude: '120.4788423',
+    location_id: 2,
+    address: '彰化縣鹿港鎮東崎里東昇段101地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.04974618',
+    longitude: '120.4635',
+    location_id: 3,
+    address: '彰化縣福興鄉新生段2400地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+  {
+    latitude: '24.25721607',
+    longitude: '120.6481218',
+    location_id: 4,
+    address: '臺中市神岡區光復段854地號',
+    landUsage: undefined,
+    hasIllegalFactory: undefined,
+  },
+
+];
+
 export default {
   name: 'TutorialContent',
   components: {
@@ -39,6 +87,8 @@ export default {
   },
   data() {
     return {
+      dataForABTesting: [...DATA_FOR_AB_TESTING],
+      shouldShowNewFilter: false,
       isLoading: false,
       allFactoriesData: [],
       currentQuestionData: {
@@ -78,12 +128,25 @@ export default {
       localStorage.setItem('SpotDiffData', JSON.stringify(allFactoriesData));
     },
     getFactoryCoord() {
-      const data = JSON.parse(localStorage.getItem('SpotDiffData'));
+      // for a/b testing, we use data which is selected,
+      // so we don't fetch request to get factory data from database.
+      // code for a/b testing:
+
       this.currentQuestionData.factoryCoord = {
-        latitude: data[this.whichQuestion - 1].latitude,
-        longitude: data[this.whichQuestion - 1].longitude,
-        address: data[this.whichQuestion - 1].address,
+        latitude: this.dataForABTesting[this.whichQuestion - 1].latitude,
+        longitude: this.dataForABTesting[this.whichQuestion - 1].longitude,
+        address: this.dataForABTesting[this.whichQuestion - 1].address,
       };
+
+      // original code:
+
+      // const data = JSON.parse(localStorage.getItem('SpotDiffData'));
+
+      // this.currentQuestionData.factoryCoord = {
+      //   latitude: data[this.whichQuestion - 1].latitude,
+      //   longitude: data[this.whichQuestion - 1].longitude,
+      //   address: data[this.whichQuestion - 1].address,
+      // };
     },
     scrollToTop() {
       if (this.$refs.start.scrollIntoView) {
@@ -91,6 +154,11 @@ export default {
       }
     },
     identifyLandUsage(landUsage) {
+      // for a/b testing, we use data which is selected,
+      // so we don't have to identify data from database.
+      // code for a/b testing:
+
+      this.dataForABTesting[this.whichQuestion - 1].landUsage = landUsage;
       this.currentQuestionData.userAnswer.landUsage = landUsage;
       // if (landUsage === 'unknown') {
       //   this.identifyHasIllegalFactory('unknown');
@@ -98,12 +166,37 @@ export default {
       //   this.isTaskACompleted = true;
       // }
       this.isTaskACompleted = true;
+
+      // original code:
+
+      // this.dataForABTesting[this.whichQuestion - 1].landUsage = landUsage;
+      // this.currentQuestionData.userAnswer.landUsage = landUsage;
+      // // if (landUsage === 'unknown') {
+      // //   this.identifyHasIllegalFactory('unknown');
+      // // } else {
+      // //   this.isTaskACompleted = true;
+      // // }
+      // this.isTaskACompleted = true;
     },
     identifyHasIllegalFactory(hasIllegalFactory) {
+      // for a/b testing, we use data which is selected,
+      // so we don't have to identify data from database.
+      // code for a/b testing:
+
+      this.dataForABTesting[this.whichQuestion - 1].hasIllegalFactory = hasIllegalFactory;
+
       this.currentQuestionData.userAnswer.hasIllegalFactory = hasIllegalFactory;
-      this.computeBoundingBoxLatLng();
-      this.storeQuestionData();
+      // this.computeBoundingBoxLatLng();
+      // this.storeQuestionData();
+      this.getTestingResult(this.shouldShowNewFilter, this.dataForABTesting);
       this.goToNextStage();
+
+      // original code:
+
+      // this.currentQuestionData.userAnswer.hasIllegalFactory = hasIllegalFactory;
+      // this.computeBoundingBoxLatLng();
+      // this.storeQuestionData();
+      // this.goToNextStage();
     },
     computeBoundingBoxLatLng() {
       // height and width of innerBoundingBox
@@ -187,16 +280,22 @@ export default {
   props: {
     whichQuestion: Number,
     goToNextStage: Function,
+    getTestingResult: Function,
   },
   emits: ['taskAisCompleted'],
 
   async created() {
+    const randomNumber = Math.floor(Math.random() * 2);
+    if (randomNumber === 1) {
+      this.shouldShowNewFilter = true;
+    }
+
     try {
       this.isLoading = true;
       await this.createClientId();
       await this.getUserToken();
       if (!this.hasSpotDiffDataInLocal) {
-        await this.getFactoriesData();
+        // await this.getFactoriesData();
         this.getFactoryCoord();
       }
       this.isLoading = false;
diff --git a/src/components/GameTaskA.vue b/src/components/GameTaskA.vue
index b973d1f..9f22f29 100644
--- a/src/components/GameTaskA.vue
+++ b/src/components/GameTaskA.vue
@@ -7,7 +7,7 @@
     </p>
   </div>
   <div class="identify-box border-color-blue">
-    <InnerBoundingBox class="inner-bounding-box" />
+    <InnerBoundingBox  v-if="!shouldShowNewFilter" class="inner-bounding-box" />
     <div class="address">
       {{formattedAddress}}
     </div>
@@ -25,12 +25,13 @@
 </template>
 
 <script>
+import L from 'leaflet';
 import ButtonLand from '../assets/svg-icon/button-land.svg';
 import ButtonFactory from '../assets/svg-icon/button-factory.svg';
 import ButtonUnknown from '../assets/svg-icon/button-unknown.svg';
 import PhotoYearBefore from '../assets/svg-icon/before.svg';
 import InnerBoundingBox from '../assets/svg-icon/inner-bounding-box.svg';
-import L from '../../node_modules/leaflet/dist/leaflet';
+import { addFarmlandLayer } from '../lib/FarmlandLayer';
 
 export default {
   name: 'TaskA',
@@ -72,6 +73,7 @@ export default {
     whichQuestion: Number,
     paramsOfMaps: Object,
     factoryCoord: [Object, String],
+    shouldShowNewFilter: Boolean,
   },
   methods: {
     setMap() {
@@ -94,6 +96,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.oldMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.oldMap);
+      }
     },
   },
   watch: {
diff --git a/src/components/GameTaskB.vue b/src/components/GameTaskB.vue
index 1619ab6..9fec305 100644
--- a/src/components/GameTaskB.vue
+++ b/src/components/GameTaskB.vue
@@ -7,7 +7,7 @@
   </div>
 
   <div class="identify-box border-color-blue">
-    <InnerBoundingBox class="inner-bounding-box" />
+    <InnerBoundingBox  v-if="!shouldShowNewFilter" class="inner-bounding-box" />
     <div class="address">
       {{ formattedAddress }}
     </div>
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import L from 'leaflet';
 import PhotoYearAfter from '../assets/svg-icon/after.svg';
 import PhotoYearBefore from '../assets/svg-icon/before.svg';
 import InnerBoundingBox from '../assets/svg-icon/inner-bounding-box.svg';
@@ -50,7 +51,7 @@ import DividerIcon from '../assets/svg-icon/divider-icon.svg';
 import HasExpansion from '../assets/svg-icon/has-expansion.svg';
 import NoExpansion from '../assets/svg-icon/no-expansion.svg';
 import ToggleSwitcher from './ToggleSwitcher.vue';
-import L from '../../node_modules/leaflet/dist/leaflet';
+import { addFarmlandLayer } from '../lib/FarmlandLayer';
 
 export default {
   name: 'TaskB',
@@ -112,6 +113,8 @@ export default {
     paramsOfMaps: Object,
     factoryCoord: [Object, String],
     landUsage: String,
+    shouldShowNewFilter: Boolean,
+
   },
   methods: {
     changePhoto() {
@@ -139,6 +142,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.newMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.newMap);
+      }
       this.oldMap = L.map('oldMap', {
         zoomControl: false,
         attributionControl: false,
@@ -158,6 +164,9 @@ export default {
           opacity: 1,
         },
       ).addTo(this.oldMap);
+      if (this.shouldShowNewFilter) {
+        addFarmlandLayer(this.oldMap);
+      }
     },
   },
   mounted() {
diff --git a/src/lib/FarmlandLayer.js b/src/lib/FarmlandLayer.js
new file mode 100644
index 0000000..38ea58f
--- /dev/null
+++ b/src/lib/FarmlandLayer.js
@@ -0,0 +1,51 @@
+/* eslint-disable no-underscore-dangle */
+import L from 'leaflet';
+import { flipAgriculturalLand } from './image';
+
+const { DomEvent, Util } = L;
+
+export const FarmlandLayer = L.TileLayer.extend({
+  // Patch the Leaflet TileLayer createTile function to return a custom tile url
+  // https://github.com/Leaflet/Leaflet/blob/990d49773a129619f2eed09712867627c8e3cf60/src/layer/tile/TileLayer.js#L147
+  createTile(coords, done) {
+    const tile = document.createElement('img');
+
+    DomEvent.on(tile, 'load', Util.bind(this._tileOnLoad, this, done, tile));
+    DomEvent.on(tile, 'error', Util.bind(this._tileOnError, this, done, tile));
+
+    if (this.options.crossOrigin || this.options.crossOrigin === '') {
+      tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
+    }
+
+    // for this new option we follow the documented behavior
+    // more closely by only setting the property when string
+    if (typeof this.options.referrerPolicy === 'string') {
+      tile.referrerPolicy = this.options.referrerPolicy;
+    }
+
+    // The alt attribute is set to the empty string,
+    // allowing screen readers to ignore the decorative image tiles.
+    // https://www.w3.org/WAI/tutorials/images/decorative/
+    // https://www.w3.org/TR/html-aria/#el-img-empty-alt
+    tile.alt = '';
+
+    const originalSrc = this.getTileUrl(coords);
+
+    flipAgriculturalLand(originalSrc).then((flippedSrc) => {
+      tile.src = flippedSrc;
+    });
+
+    return tile;
+  },
+});
+
+export default FarmlandLayer;
+
+export function addFarmlandLayer(map) {
+  new FarmlandLayer(
+    'https://map.coa.gov.tw/server/rest/services/FarmlandSurvey/L13_109/MapServer/tile/{z}/{y}/{x}',
+    {
+      opacity: 0.5,
+    },
+  ).addTo(map);
+}
diff --git a/src/lib/image.js b/src/lib/image.js
new file mode 100644
index 0000000..483e63e
--- /dev/null
+++ b/src/lib/image.js
@@ -0,0 +1,72 @@
+/* eslint-disable no-param-reassign */
+const canvas = (window.OffscreenCanvas) ? new OffscreenCanvas(500, 500) : document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+
+export const createImageProcessor = (processor) => (src) => new Promise((resolve) => {
+  const image = new Image();
+  image.crossOrigin = '';
+  image.src = src;
+  image.style.display = 'none';
+  image.onload = async () => {
+    canvas.width = image.width;
+    canvas.height = image.height;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.drawImage(image, 0, 0);
+
+    const imageData = ctx.getImageData(0, 0, image.width, image.height);
+    const { data } = imageData;
+
+    await Promise.resolve(processor(data));
+
+    const tmpCanvas = document.createElement('canvas');
+    const tmpCtx = tmpCanvas.getContext('2d');
+    tmpCanvas.width = image.width;
+    tmpCanvas.height = image.height;
+
+    tmpCtx.putImageData(imageData, 0, 0);
+
+    resolve(tmpCanvas.toDataURL());
+
+    image.remove();
+    tmpCanvas.remove();
+  };
+});
+
+export const toGrayScale = createImageProcessor((data) => {
+  // doing grayscale operaion pixel by pixel
+  for (let i = 0; i < data.length; i += 4) {
+    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+    data[i] = avg; // red
+    data[i + 1] = avg; // green
+    data[i + 2] = avg; // blue
+  }
+});
+
+const argriculturalLandColors = [
+  [255, 0, 0],
+];
+
+const isArrayEqual = (a, b) => !a.some((v, i) => b[i] !== v);
+
+const isAgriculturalLand = (arr) => argriculturalLandColors.some((c) => isArrayEqual(c, arr));
+
+export const flipAgriculturalLand = createImageProcessor((data) => {
+  for (let i = 0; i < data.length; i += 4) {
+    const color = Array.from(data.slice(i, i + 3));
+
+    if (isAgriculturalLand(color)) {
+      // set to transparent
+      data[i] = 0;
+      data[i + 1] = 0;
+      data[i + 2] = 0;
+      data[i + 3] = 1;
+    } else {
+      // set to black
+      data[i] = 0;
+      data[i + 1] = 0;
+      data[i + 2] = 0;
+      data[i + 3] = 255;
+    }
+  }
+});
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 5d48075..19cca13 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -13,7 +13,7 @@
         :completed-stage="completedStage"
       />
       <GameContent :which-Question="whichStage" :go-to-next-stage="goToNextStage"
-      @taskAisCompleted='changeHeight' />
+      :get-testing-result="getTestingResult" @taskAisCompleted='changeHeight' />
     </div>
     <div v-else class="container bg-skyBlue container-border-sky-blue">
       <div class="checking-page">
@@ -21,10 +21,17 @@
         <div class="check-text">
           <p>你確定要送出資料了嗎？</p>
           <p class="check-text--little-font">阿伯很期待 &gt; &lt;</p>
+          <p class="check-text--little-font">{{this.abTesting.isShowingNewFilter ?
+            '使用新版遮罩':'使用舊版遮罩'}}</p>
+          <p class="check-text--little-font">{{this.abTesting.userAnswer}}</p>
         </div>
         <div class="button-group">
           <img src="../assets/svg-icon/intro-animation/farmer.gif" class="farmer-icon" />
-          <button class="btn" @click="sendAnswer" data-value="send-answer"><sendAnswer /></button>
+          <button class="btn--test" @click="copyAnswer">複製答案</button>
+          <!-- <button class="btn" @click="sendAnswer" data-value="send-answer">
+            <sendAnswer />
+            </button> -->
+
           <button class="btn" @click="backToPreviousStage"><backToGamePage /></button>
         </div>
       </div>
@@ -34,7 +41,7 @@
 </template>
 
 <script>
-import axios from 'axios';
+// import axios from 'axios';
 import { mapActions, mapState } from 'vuex';
 import TheHeader from '@/components/TheHeader.vue';
 import ProgressBar from '@/components/ProgressBar.vue';
@@ -42,7 +49,7 @@ import GameContent from '@/components/GameContent.vue';
 import LoadingPage from '@/components/LoadingPage.vue';
 import IntroTitle from '../assets/svg-icon/intro-title.svg';
 import backToGamePage from '../assets/svg-icon/back-to-game-page.svg';
-import sendAnswer from '../assets/svg-icon/send-answer.svg';
+// import sendAnswer from '../assets/svg-icon/send-answer.svg';
 
 export default {
   name: 'TheGame',
@@ -53,12 +60,23 @@ export default {
       isAllQuestionDone: false,
       shouldChangeHeight: false,
       isLoading: false,
+      abTesting: {
+        isShowingNewFilter: undefined,
+        userAnswer: [],
+      },
     };
   },
   methods: {
     ...mapActions(['createClientId', 'getUserToken', 'getStatusData']),
+    copyAnswer() {
+      navigator.clipboard.writeText(JSON.stringify(this.abTesting));
+    },
     changeHeight() {
-      this.shouldChangeHeight = !this.shouldChangeHeight;
+      this.shouldChangeHeight = !this.uldChangeHeight;
+    },
+    getTestingResult(isShowingNewFilter, userAnswer) {
+      this.abTesting.isShowingNewFilter = isShowingNewFilter;
+      this.abTesting.userAnswer = userAnswer;
     },
     goToNextStage() {
       if (this.whichStage < 5) {
@@ -75,42 +93,50 @@ export default {
       }
     },
     async sendAnswer() {
-      try {
-        this.isLoading = true;
-        await this.createClientId();
-        await this.getUserToken();
-        const data = JSON.parse(localStorage.getItem('SpotDiffData'));
-        data.forEach((factory) => {
-          /* eslint no-param-reassign: ["error", { "props": false }] */
-          if (factory.land_usage === 'buliding-land') {
-            factory.land_usage = 1;
-          } else if (factory.land_usage === 'farm-land') {
-            factory.land_usage = 2;
-          } else {
-            factory.land_usage = 0;
-          }
-          if (!factory.expansion) {
-            factory.expansion = 1;
-          } else if (factory.expansion) {
-            factory.expansion = 2;
-          } else {
-            factory.expansion = 0;
-          }
-          delete factory.latitude;
-          delete factory.longitude;
-          delete factory.address;
-        });
-        await axios.post(`${process.env.VUE_APP_SPOTDIFF_APP_URL || '/api'}/answer/`, {
-          user_token: this.userToken,
-          data,
-        });
-        localStorage.removeItem('SpotDiffData');
-        await this.getStatusData();
-        this.isLoading = false;
-        this.$router.push('ending');
-      } catch (e) {
-        // console.log(e.response.data.message);
-      }
+      // for a/b testing, we use data which is selected,
+      // so we don't send data to our database.
+
+      // code for a/b testing:
+      this.$router.push('ending');
+
+      // original code:
+
+      // try {
+      //   this.isLoading = true;
+      //   await this.createClientId();
+      //   await this.getUserToken();
+      //   const data = JSON.parse(localStorage.getItem('SpotDiffData'));
+      //   data.forEach((factory) => {
+      //     /* eslint no-param-reassign: ["error", { "props": false }] */
+      //     if (factory.land_usage === 'buliding-land') {
+      //       factory.land_usage = 1;
+      //     } else if (factory.land_usage === 'farm-land') {
+      //       factory.land_usage = 2;
+      //     } else {
+      //       factory.land_usage = 0;
+      //     }
+      //     if (!factory.expansion) {
+      //       factory.expansion = 1;
+      //     } else if (factory.expansion) {
+      //       factory.expansion = 2;
+      //     } else {
+      //       factory.expansion = 0;
+      //     }
+      //     delete factory.latitude;
+      //     delete factory.longitude;
+      //     delete factory.address;
+      //   });
+      //   await axios.post(`${process.env.VUE_APP_SPOTDIFF_APP_URL || '/api'}/answer/`, {
+      //     user_token: this.userToken,
+      //     data,
+      //   });
+      //   localStorage.removeItem('SpotDiffData');
+      //   await this.getStatusData();
+      //   this.isLoading = false;
+      //   this.$router.push('ending');
+      // } catch (e) {
+      //   // console.log(e.response.data.message);
+      // }
     },
   },
   computed: {
@@ -131,7 +157,7 @@ export default {
     LoadingPage,
     IntroTitle,
     backToGamePage,
-    sendAnswer,
+    // sendAnswer,
   },
   inject: ['isGamePage'],
 };
@@ -177,7 +203,15 @@ export default {
     margin-bottom: 94px;
     .btn {
       margin-bottom: 54px;
+      &--test{
+        color: black;
+        border: 1px solid black;
+        padding: 5px;
+        margin-top: 10px;
+        font-size: 18px;
+      }
     }
+
   }
   .farmer-icon {
     width: 89px;