diff --git a/examples/snap.html b/examples/snap.html
index 3827370d60..ecd7551103 100644
--- a/examples/snap.html
+++ b/examples/snap.html
@@ -16,15 +16,6 @@ tags: "draw, edit, modify, vector, snap"
       <input type="radio" name="interaction" value="draw" id="draw" checked>
       Draw &nbsp;
     </label>
-  </div>
-  <div class="radio">
-    <label>
-      <input type="radio" name="interaction" value="modify">
-      Modify &nbsp;
-    </label>
-  </div>
-  <div class="form-group">
-    <label for="draw-type">Draw type &nbsp;</label>
     <select name="draw-type" id="draw-type">
       <option value="Point">Point</option>
       <option value="LineString">LineString</option>
@@ -32,4 +23,10 @@ tags: "draw, edit, modify, vector, snap"
       <option value="Circle">Circle</option>
     </select>
   </div>
+  <div class="radio">
+    <label>
+      <input type="radio" name="interaction" value="modify">
+      Modify &nbsp;
+    </label>
+  </div>
 </form>
diff --git a/examples/snap.js b/examples/snap.js
index 80cf489d11..c9f7c53ea5 100644
--- a/examples/snap.js
+++ b/examples/snap.js
@@ -94,18 +94,16 @@ const ExampleDraw = {
     source: vector.getSource(),
     type: 'Circle',
   }),
-  getActive: function () {
-    return this.activeType ? this[this.activeType].getActive() : false;
-  },
+  activeDraw: null,
   setActive: function (active) {
-    const type = optionsForm.elements['draw-type'].value;
+    if (this.activeDraw) {
+      this.activeDraw.setActive(false);
+      this.activeDraw = null;
+    }
     if (active) {
-      this.activeType && this[this.activeType].setActive(false);
-      this[type].setActive(true);
-      this.activeType = type;
-    } else {
-      this.activeType && this[this.activeType].setActive(false);
-      this.activeType = null;
+      const type = optionsForm.elements['draw-type'].value;
+      this.activeDraw = this[type];
+      this.activeDraw.setActive(true);
     }
   },
 };
@@ -117,14 +115,16 @@ ExampleDraw.init();
  */
 optionsForm.onchange = function (e) {
   const type = e.target.getAttribute('name');
-  const value = e.target.value;
   if (type == 'draw-type') {
-    ExampleDraw.getActive() && ExampleDraw.setActive(true);
+    ExampleModify.setActive(false);
+    ExampleDraw.setActive(true);
+    optionsForm.elements['interaction'].value = 'draw';
   } else if (type == 'interaction') {
-    if (value == 'modify') {
+    const interactionType = e.target.value;
+    if (interactionType == 'modify') {
       ExampleDraw.setActive(false);
       ExampleModify.setActive(true);
-    } else if (value == 'draw') {
+    } else if (interactionType == 'draw') {
       ExampleDraw.setActive(true);
       ExampleModify.setActive(false);
     }