Need to design & develop exact like COPD Assessment Test (CAT) website survey form

Level 80

Would anyone help me please?

@bhojkamal Help with what exactly? All you’ve said is you want to build a site that’s a rip off of another. So what exactly do you need help with? What are you stuck on?

Level 1

@martinbean I want to develop exactly a-z this -> https://www.catestonline.org/patient-site-test-page-english.html select the number and get the total score.

Level 80

@bhojkamal Then get started.

Level 1

If you know any example with source codes, please provide me the link. I could not design like this and reactive on the value.

Example: I am very happy 0  1  2  3  4  5  I am very sad
// SCORE:  according to the value clicked and it should be marked.

Level 80

@bhojkamal So you mean you want me to take time out of my day, go find you a clone of some site, and then give you the link…?

The funny thing about being a developer is, sometimes you have to write code when there isn’t an existing package or project that does exactly what you want 🙃

3 likes

Level 1

@martinbean Thanks for your reply. I am sorry about it if you feel like that. What I am just saying - to all - not just you, anyone who has worked, designed previously or know the repo of this type, just forward to me, which will take few minutes. If you don't have any such, please don't worry.

I must do and I will do even if I get no help from forum. If I do from scratch, It may takes 1-2 days if I don't found the sample codes, that's why just posting on the forum to save my some times.

Level 1

Hello, I have completed the design part. The screenshot is here -> https://prnt.sc/140feeq

Now I want to get the value on click the value 0-5 in the input element.

I have given object for 0-5 value. I am able to get all the value but not just one value of that object on click.

//The html part
<div class="row copd p-1 align-items-center">
        <div class="col-md-9">
        <div class="row border rounded-pill bg-light">
        <div class="col-md-3 col-sm-12 col-auto text-lg-end">I never cough</div>
        <div class="d-flex flex-row flex-sm-wrap col-md-5 col-sm-12 col-xs-12 col-auto justify-content-center">
          <input type="text" size="1" readonly v-model="cough.zer" @click="showVal">
          <input type="text" size="1" readonly v-model="cough.one" @click="showVal">
          <input type="text" size="1" readonly v-model="cough.two" @click="showVal">
          <input type="text" size="1" readonly v-model="cough.thr" @click="showVal">
          <input type="text" size="1" readonly v-model="cough.fou" @click="showVal">
          <input type="text" size="1" readonly v-model="cough.fiv" @click="showVal">
        </div>
        <div class="col-md-4 col-sm-12 col-auto">I cough all the time</div>
        </div>
        </div>
        <div class="col-md-3 ">
          <p style="width:55px; height:40px" class="border rounded-pill border-info  bg-light m-3">{{ showVal }}</p>
        </div>        
      </div>
.
.
.
//script part

data(){
    return {
      cough:{
        zer:0,
        one:1,
        two:2,
        thr:3,
        fou:4,
        fiv:5
      },
.
.
.
methods: {
    showVal: function(){
      console.log(this.cough)
      return this.cough
    }
  },

}

Can anyone help me out please?

Best Answer

Level 80

@bhojkamal Well, you’re not using models in Vue correctly for a start.

If a user can select one of multiple options then make them radio inputs, not multiple text inputs. This is forms 101 to be honest. Give the radios the same name but different values, and you can then use v-model on those to get the value the user selects:

<label>
  <input type="radio" value="0" v-model="cough">
  <span>0</span>
</label>
<label>
  <input type="radio" value="1" v-model="cough">
  <span>1</span>
</label>
<label>
  <input type="radio" value="2" v-model="cough">
  <span>2</span>
</label>
<label>
  <input type="radio" value="3" v-model="cough">
  <span>3</span>
</label>
<label>
  <input type="radio" value="4" v-model="cough">
  <span>4</span>
</label>
<label>
  <input type="radio" value="5" v-model="cough">
  <span>5</span>
</label>

Now, when a user clicks on a radio value, the value of this.cough in your Vue component will be updated with the value of the radio the user selected.

export default {
    data() {
        return {
            cough: null // This will be updated when user selects an option
        };
    }
}

Because this.cough is reactive, you can show that in your template:

<template v-if="cough">
    <p>Selected cough value: {{ cough }}</p>
</template>

No need for that click handler. You’re using a v-model.

2 likes

Level 1

@martinbean, Thanks a lot. I've got like this -> https://prnt.sc/140upc5 - I have done for one row now.

With radio button, the design is a bit different.. It is useful too. Let me see what can I do with css.

It would be nice if I could put the value/number inside. I think it can do with CSS.

jlrdw

Level 75

@bhojkamal right here on laracasts @jeffreyway has quite a few videos on all types of css techniques. Many of them are free, and code is on Github.

Sounds like you just need to learn a little more front end stuff.

Level 1

@jlrdw I have succeed to design now and get scored for each. here is screenshot -> https://prnt.sc/141cxmq

Would you please help me to calculated the total score with computed method of vue 3.

Thanks

jlrdw