How to create fields with yes, no and not sure answers only

auditoriaicsc

Perguntado em 10 de julho de 2024 às 11:09
```
I would like to ask questions with a yes, no answer and I can't say. But for the user to have a better experience, I would like them to respond through a button that has these three options. Is there already something similar developed within jotform?
```
CÓDIGO EM HTML "Entendi, você quer que a palavra escolhida fique visível por trás do botão deslizante, sem a necessidade de exibir a resposta em outra parte da página. Aqui está a versão ajustada do código para atender a essa necessidade:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Questionnaire</title>
  <style>
    body {
      font-family: 'SamsungOne', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f5f5f5;
    }

    .container {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .question {
      margin-bottom: 20px;
      font-size: 18px;
    }

    .toggle-button {
      display: flex;
      width: 300px;
      height: 50px;
      border: 2px solid #000;
      border-radius: 25px;
      overflow: hidden;
      position: relative;
      user-select: none;
    }

    .toggle-option {
      flex: 1;
      padding: 10px;
      text-align: center;
      line-height: 30px;
      color: #000;
      font-weight: bold;
      position: relative;
      z-index: 1;
    }

    .toggle-thumb {
      position: absolute;
      top: 0;
      width: 33.33%;
      height: 100%;
      background-color: #d3d3d3;
      border-radius: 25px;
      transition: transform 0.3s;
      z-index: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="question">Is this the question you want to ask?</div>
    <div class="toggle-button" id="toggleButton">
      <div class="toggle-thumb" style="transform: translateX(200%);"></div>
      <div class="toggle-option" onDISABLEDclick="setResponse(0)">Yes</div>
      <div class="toggle-option" onDISABLEDclick="setResponse(1)">No</div>
      <div class="toggle-option" onDISABLEDclick="setResponse(2)">Not sure</div>
    </div>
  </div>

  <script>
    let currentPosition = 2;
    const thumb = document.querySelector('.toggle-thumb');
    const options = document.querySelectorAll('.toggle-option');

    function setResponse(index) {
      currentPosition = index;
      thumb.style.transform = `translateX(${currentPosition * 100}%)`;
    }

    options.forEach((option, index) => {
      option.addEventListener('click', () => setResponse(index));
    });
  </script>
</body>
</html>
```

Neste código, as opções "Yes", "No" e "Not sure" permanecem visíveis por trás do botão deslizante (toggle thumb). Quando uma opção é clicada, o botão deslizante se move para a posição correspondente, e a escolha do usuário pode ser concluída pela posição do botão sobre a palavra visível."
Paul Janver Jotform Support

Respondido em 10 de julho de 2024 às 13:43
Hi auditoriaicsc,
Thanks for reaching out to Jotform Support. To achieve that you can use the Single Choice element. Using the Single Choice options is easy. Let me show how it is done:
1. In the Form Builder, click on your Add Form Element, and then scroll down and click on Single Choice under Basic Elements.
2. Click on the Gear icon beside the Single Choice Element.
3. Then, click on Options and under Options Type Yes, No and Not Sure.
Let us know if you need any other help.

Sua Resposta