CODEWITHSUNDEEP
htmlcssvue.jsradio-button
Three_L_Some
Three_L_Some

Reputation: 29

Turn SurveyJS Radio Group into Button

I am using SurveyJS with a little bit of Vue. I want to make the Radio button looks like a button, because I think SurveyJS has no "button-like" for the choices. this is what it looks like:enter image description here

Here's my index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Survey Prototype</title><meta name="viewport" content="width=device-width"/>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
        <script src="https://unpkg.com/[email protected]/survey.core.min.js"></script>
        <script src="https://unpkg.com/[email protected]/survey.i18n.min.js"></script>
        <script src="https://unpkg.com/[email protected]/survey-vue-ui.min.js"></script>
        <link href="https://unpkg.com/[email protected]/defaultV2.min.css" type="text/css"                      rel="stylesheet"/>
        <link rel="stylesheet" href="./style.css"></head>
    <body>
        <div id="surveyElement" style="display:inline-block;width:100%;">
            <survey :survey='survey'/>
        </div>
        <div id="surveyResult"></div>
        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>

and here's my index.js:

           Survey
.StylesManager
.applyTheme("defaultV2");

const json = {
    pages: \[
      {
        questions: \[
          {
            type: "radiogroup",
            name: "Question 1",
            title: "Deliver through others.",
            choices: \[
              "Not effective",
              "Neither effective nor Effective",
              "Effective"
            \]
          },
          {
            type: "radiogroup",
            name: "Question 2",
            title: "Understand others perspective.",
            choices: \[
              "Not effective",
              "Neither effective nor Effective",
              "Effective"
            \]
          },
          {
            type: "radiogroup",
            name: "Question 3",
            title: "Solve complex problems.",
            choices: \[
              "Not effective", 
              "Neither effective nor Effective",
              "Effective"
            \]
          },
        \]
      }
    \]
  };

window.survey = new Survey.Model(json);

 survey
.onComplete
.add(function (sender) {
    let data = JSON.stringify(sender.data)
    data = data.replaceAll("Not effective", "A")
    data = data.replaceAll("Neither effective nor Effective", "B")
    data = data.replaceAll("Effective", "C")

    var obj = JSON.parse(data)

    document
        .querySelector('#surveyResult')
        .textContent = "Result JSON:\\n" + JSON.stringify(obj, null, 3);

});

  var app = new Vue({
el: '#surveyElement',
data: {
    survey: survey
}});

How can I target the type="radiogroup" in css, to manipulate its looks. To make it look like a button? I tried this post: Making radio buttons look like buttons instead but it doesn't work. Please send help.

Upvotes: 1

Views: 598

Answers (1)

rootShiv
rootShiv

Reputation: 1417

i think you are looking for something like this .

@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0069d9;
  font-family: 'Lato', sans-serif;
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}
<div class="wrapper">
 <input type="radio" name="select" id="option-1" checked>
 <input type="radio" name="select" id="option-2">
   <label for="option-1" class="option option-1">
     <div class="dot"></div>
      <span>Option 1</span>
      </label>
   <label for="option-2" class="option option-2">
     <div class="dot"></div>
      <span>Option 2</span>
   </label>
</div>

Upvotes: 2

Related Questions