added chckbox

app/components/checkbox.hbs

@@ -0,0 +1,15 @@
+<div class="form-group">
+  <label>{{this.args.element.label}}</label>
+  {{#each this.args.element.options as |option|}}
+    <div class="checkbox-option">
+      <input
+        type="checkbox"
+        name={{this.args.element.id}}
+        checked={{option.checked}}
+        {{on "change" this.updateSelection}} 
+        checked={{eq this.args.element.value option.value}}
+      >
+      <label for={{option.value}}>{{option.label}}</label>
+    </div>
+  {{/each}}
+</div>

app/components/checkbox.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class CheckboxComponent extends Component {
+  @action
+  toggleCheckbox(event) {
+    const isChecked = event.target.checked;
+    if (this.args.updateValue) {
+      this.args.updateValue(isChecked);
+    }
+  }
+}

app/components/radio-button.js

@@ -2,14 +2,14 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
 export default class RadioButtonComponent extends Component {
-    @action
-    updateSelection(event) {
-      // Проверим, что event и event.target существуют
-      if (event && event.target) {
-        const selectedValue = event.target.value;  // Получаем значение из event
-        this.args.updateValue(selectedValue);      // Передаём выбранное значение
-      } else {
-        console.error('Event or event.target is undefined');
-      }
+  @action
+  updateSelection(event) {
+    // Проверим, что event и event.target существуют
+    if (event && event.target) {
+      const selectedValue = event.target.value; // Получаем значение из event
+      this.args.updateValue(selectedValue); // Передаём выбранное значение
+    } else {
+      console.error('Event or event.target is undefined');
     }
+  }
 }

app/controllers/completion.js

@@ -0,0 +1,18 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class CompletionController extends Controller {
+  @service router;
+
+  @action
+  startNewSurvey() {
+    localStorage.removeItem('surveyProgress');
+    this.router.transitionTo('survey');
+  }
+
+  @action
+  goHome() {
+    this.router.transitionTo('introduction');
+  }
+}

app/controllers/survey.js

@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 class PageElement {
   @tracked value = '';
@@ -15,11 +16,11 @@ class PageElement {
 }
 
 export default class SurveyPageController extends Controller {
-  @tracked currentStep = 1;
   @tracked currentPage = 0;
   totalSteps = this.pages.length;
+  @service router;
 
-  @tracked surveyName = "Satisfaction survey"
+  @tracked surveyName = 'Satisfaction survey';
 
   @tracked pages = [
     {
@@ -29,11 +30,17 @@ export default class SurveyPageController extends Controller {
         new PageElement('text', 'Role', 'role', 'role', true),
         new PageElement('text', 'Age', 'age', 'age', true),
         new PageElement('text', 'Email', 'email', 'email', true),
-        new PageElement('radio', 'Select your favorite color', 'favoriteColor', true, [
-          { label: 'Red', value: 'red' },
-          { label: 'Green', value: 'green' },
-          { label: 'Blue', value: 'blue' }
-        ])
+        new PageElement(
+          'radio',
+          'Select your favorite color',
+          'favoriteColor',
+          true,
+          [
+            { label: 'Red', value: 'red' },
+            { label: 'Green', value: 'green' },
+            { label: 'Blue', value: 'blue' },
+          ],
+        ),
       ],
     },
     {
@@ -47,15 +54,33 @@ export default class SurveyPageController extends Controller {
     {
       name: 'Satisfaction',
       elements: [
-        new PageElement('text', 'Overall satisfaction', 'statisfactionLevel', true),
-        // new PageElement('text', 'Role', 'currRole', true),
-        // new PageElement('text', 'Role', 'currRole', true),
+        new PageElement(
+          'text',
+          'Overall satisfaction',
+          'statisfactionLevel',
+          true,
+        ),
+        new PageElement(
+          'text',
+          'Project satisfaction',
+          'projectSatisfaction',
+          true,
+        ),
+        new PageElement(
+          'checkbox',
+          'Select your future plans',
+          'plans',
+          true,
+          [
+            { label: 'Technologies', cheked: false },
+            { label: 'People', cheked: false },
+            { label: 'Other', cheked: false },
+          ],
+        ),
       ],
     },
   ];
 
-  @tracked currentPage = 0;
-
   get currentPageConfig() {
     return this.pages[this.currentPage];
   }
@@ -65,30 +90,31 @@ export default class SurveyPageController extends Controller {
   }
 
   @action
-updateElementValue(element, eventOrValue) {
-  // Если передается событие, это input или change, получаем значение
-  const value = eventOrValue.target ? eventOrValue.target.value : eventOrValue;
-  element.value = value; 
-  // this.saveSurveyProgress();  // Сохраняем прогресс в localStorage
-}
+  updateElementValue(element, eventOrValue) {
+    // Если передается событие, это input или change, получаем значение
+    const value = eventOrValue.target
+      ? eventOrValue.target.value
+      : eventOrValue;
+    element.value = value;
+    // this.saveSurveyProgress();  // Сохраняем прогресс в localStorage
+  }
 
   get isNextDisabled() {
-    return this.currentPageConfig.elements.some(element => {
+    return this.currentPageConfig.elements.some((element) => {
       if (element.required) {
         if (element.type === 'radio') {
-          return !element.value;  
+          return !element.value;
         } else {
-          return !element.value || element.value.trim() === '';  
+          return !element.value || element.value.trim() === '';
         }
       }
-      return false;  
+      return false;
     });
   }
-  
+
   get btnTitle() {
     return this.currentPage === this.pages.length - 1 ? 'Submit' : 'Proceed';
   }
-
 
   get isBackEnabled() {
     return this.currentPage > 0;
@@ -100,7 +126,7 @@ updateElementValue(element, eventOrValue) {
       this.currentPage++;
       this.currentStep++;
     } else {
-      alert('Survey completed!');
+      this.router.transitionTo('completion');
     }
   }
 

app/router.js

@@ -10,4 +10,5 @@ Router.map(function () {
   // this.route('introduction');
   this.route('survey');
   this.route('introduction');
+  this.route('completion');
 });

app/routes/completions.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class CompletionRoute extends Route {}

app/templates/completion.hbs

@@ -0,0 +1,25 @@
+<section class="section">
+  <div class="container">
+    <div class="columns is-centered">
+      <div class="column is-half-desktop is-three-quarters-tablet is-full-mobile">
+        <div class="box has-text-centered">
+          <h1 class="title is-size-3-mobile is-size-2-tablet is-size-1-desktop">
+            Thank You!
+          </h1>
+          <p class="subtitle">
+            You have successfully completed the survey.
+          </p>
+
+          <div class="buttons is-centered mt-5">
+            <button class="button is-primary" type="button" {{on "click" this.startNewSurvey}}>
+              Start a New Survey
+            </button>
+            <button class="button is-link" type="button" {{on "click" this.goHome}}>
+              Go to Home
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

app/templates/survey.hbs

@@ -3,13 +3,13 @@
     <h3 class="title has-text-centered is-size-3-mobile is-size-3-tablet is-size-2-desktop">
       {{this.surveyTitle}}
     </h3>
-     <!-- Step bar -->
+     {{!-- Step bar --}}
         <StepBar @currentStep={{this.currentStep}} @totalSteps={{this.totalSteps}} />
 
     <div class="columns is-centered">
       <div class="column is-half-desktop is-three-quarters-tablet is-full-mobile">
 
-        <!-- Dynamic Page Content -->
+        {{!-- Dynamic Page Content --}}
         <div class="box">
           <h2 class="subtitle">{{this.currentPageConfig.name}}</h2>
 
@@ -34,10 +34,13 @@
                 <RadioButton @element={{element}} @updateValue={{fn this.updateElementValue element}} />
               </div>
             {{/if}}
+            {{#if (eq element.type "checkbox")}}
+                <Checkbox @element={{element}} @updateValue={{fn this.updateElementValue element}} />
+            {{/if}}
           {{/each}}
         </div>
 
-        <!-- Navigation Buttons -->
+        {{!-- Navigation Buttons --}}
         <div class="buttons is-centered mt-4">
           <button
             class="button is-light"

tests/integration/components/checkbox-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'survey-builder/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | checkbox', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Checkbox />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Checkbox>
+        template block text
+      </Checkbox>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});