Category: javascript

I am not able to select option whose value contain special characters in datalist I’m able to select only Option which do not contain special characters.

<label class="form-label">Seller</label>
<?php $seller = mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM party_details Where id= '".$submit['seller_id']."'")); ?>
<input id="seller" list="get_seller" type="text" class="form-control" value="<?php echo $seller['cname'].'-'.$seller['city']; ?>" name="seller" readonly>
<input type="text" id="seller_id" name="seller_id" value="<?php echo $submit['seller_id']; ?>" class="form-control" />
<datalist id="get_seller">
  <?php 
    $seller = mysqli_query($conn,"SELECT * FROM  party_details ");
    while($sellers = mysqli_fetch_array($seller)) { ?>
    <option value="<?php echo $sellers['cname'] ; ?>"><?php echo $sellers['cname'].'-'.$sellers['city'] ; ?></option>
  <?php } ?>
</datalist>

$(document).ready(function() {
  document.getElementById('seller').onchange = function() {
    var input = document.getElementById('seller').value;

    $.ajax({
      type: "POST",
      url: "php/get_party_city.php",
      data: "id=" + input,
      success: function(data) {
        //$('#gstR'+rowIdx).val(data['gst']);
        $("#seller_id").val(data['selected_id']);
        $("#seller").val(data['with_brand']);
      }
    });
  }
});

Page to get id:

<?php 
  include('connection.php');
  $name = mysqli_real_escape_string($conn,$_POST['id']);
  $sql = mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM party_details WHERE cname = '$name'"));
  $option = $sql['cname']."-".$sql['city'];
  $set_id = $sql['id'];
  $opt = mysqli_real_escape_string($conn, $option);
  header('Content-Type: application/json');
  echo json_encode(array('selected_id' => $set_id,'with_brand' => $opt));
?>

When I try to run a NextJS or React Project the development server does not start. The command exits as soon as the server should start.

$ npm start

> [email protected] start
> react-scripts start

(node:12595) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:12595) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

$ npm run dev

> [email protected] dev
> next dev

   ▲ Next.js 14.1.0
   - Local:        http://localhost:3000

The Exitcode is 0.

If I try to run a build I sometimes get a segementation fault.
The syslog only states that the process got dumped.

Node Express applications work fine.

I tried:

• updating npm and node
• switching to nvm to exclude the CentOS repos
• npm rebuild
• delete node_modules and npm install
• run as root
• creating new project for testing
• Disable SELinux
• Disable Firewalld

Any Ideas are welcome. Thank you.

I want to create the Renko chart using React js with live finance data movement but don’t know how to start so please guide me and please suggest to me which package I use to create live data and update the Renko chart.

I want to develop Renko chart using React JS with live finance data movement but I don’t how to start this so want some guidance.

I am writing html within javascript in my express server (intellij IDEA ultimate), and when i press option + up to select the outter tag in html, it most of the times get the wrong one.

Hard to explain so here is a before and after. I highlight body, i expect pressing option + up to highlight the rest of the body, but instead it goes wild.

is this a bug? is there a fix for this?

Before pressing option + up:

After pressing option + up:

I have a json file like below.

[
  {
    "symbol": "USDC",
    "name": "USD Coin",
    "decimals": "6",
    "id": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
    "feeTier": "100",
    "amounts": [2499.769116, 2500.269174]
  },
  {
    "symbol": "WETH",
    "name": "Wrapped Ether",
    "decimals": "18",
    "id": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
    "feeTier": "3000",
    "amounts": [1.0526261272920125, 1.0590149439506866]
  },
  {
    "symbol": "USDC",
    "name": "USD Coin",
    "decimals": "6",
    "id": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
    "feeTier": "500",
    "amounts": [2499.591796, 2502.09356]
  },
  {
    "symbol": "WETH",
    "name": "Wrapped Ether",
    "decimals": "18",
    "id": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
    "feeTier": "500",
    "amounts": [1.0551711392408099, 1.0565026582314214]
  },
  {
    "symbol": "FRAX",
    "name": "Frax",
    "decimals": "18",
    "id": "0x853d955acef822db058eb8505911ed77f175b99e",
    "feeTier": "500",
    "amounts": [2505.1101184400254, 2507.620759133425]
  }
]

I will compare the amounts values among those with the same name, and I want to show the ones whose first element is bigger in amounts. In the final version, other json elements will not be shown. Actually the final version will be as follows;

[
  {
    "symbol": "USDC",
    "name": "USD Coin",
    "decimals": "6",
    "id": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
    "feeTier": "100",
    "amounts": [2499.769116, 2500.269174]
  },
  {
    "symbol": "WETH",
    "name": "Wrapped Ether",
    "decimals": "18",
    "id": "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
    "feeTier": "3000",
    "amounts": [1.0526261272920125, 1.0590149439506866]
  },
  {
    "symbol": "FRAX",
    "name": "Frax",
    "decimals": "18",
    "id": "0x853d955acef822db058eb8505911ed77f175b99e",
    "feeTier": "500",
    "amounts": [2505.1101184400254, 2507.620759133425]
  }
]

How I can do that?

I have do a Unit testing using mocha and chai but I got timeout error.

describe(‘Real Time Unit Test For Main Engine’, () => {

it('Testing Real Response', async () => {

    const response = await chai.request(app)
    .post('/AirShopping')
    .send(request)
    .set('Content-Type', 'application/json')
    .set('Authorization', '9327969053c0068dd9e07c529866b94d1692882896');

    expect(response).to.have.status(200);
});

});

output :

Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.

why I got timeout error, I have used async await for my code even though it can’t wait.

Searching using keyUp event with debounce functionality in javascript is not working on mobile app.

but it’s properly working on website.

what can i do to work my search functionality in mobile app.

Can someone help me with a way to add a common attribute to multiple flow schemas?

I have different schema files for different task types which are responsible for attributes of those tasks. I want to add a common attribute to all the schemas, but if I do so I get the error mentioned in image.

Schema file:

{
  "name": "voice",
  "uri": "http://some-company/schema/bpmn/ivr",
  "$schema": "http://json-schema.org/draft-07/schema",
  "description": "Properties for the voice file",
  "prefix": "voice",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "types": [
    {
      "name": "voiceFile",
      "extends": [
        "bpmn:Task"
      ],
      "properties": [
        {
          "name": "taskType",
          "description": "This variable tells what type of task it is",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "taskName",
          "description": "hold task's name",
          "isAttr": true,
          "type": "String"
        },
        {
          "name": "isDisabledVoice",
          "isAttr": false,
          "description": "tells if the element is disabled",
          "type": "String"
        }
      ]
    }
  ],
  "emumerations": [],
  "associations": []
}

I tried adding attributes from frontend by:

const modeler = ModelerService.getModeler();
const modeling = modeler.get('modeling');
const attrInfo = {};
attrInfo[key] = value;
modeling.updateProperties(el, attrInfo);

Here, key is the attribute name and value is the attribute value.

This should have normally added the attribute to the xml tags, but when I add the attribute to more than one type of tasks, then it gives conflict that same attribute can not be added to more than one task.

Subj. How to achieve perspective 3D text goes through another object in the scene? Text background should be transparent.

Bonus question: how do I turn that text into animated ticker?

I’ve tried CSS3DRenderer, but can’t make text background transparent:

i have a problem in Ci i have crud operation read update and delete but I have changed these function to ajax request.
i am making update functionality through an Ajax request where I am using through the modal. i have values where i can edit these values when i edit these values and change and submit it will not go to success function. it will give me the error response. it will not submit on my server values. update values does not update on server side and not shown in my view. tell me where iam doing wrong. as iam a beginner and new in ci.

enter image description here
show_item.php

<div class="modal-body">
            <!-- Include your form here -->
            <form id='editForm'>
              <div class="row">


                <div class="col-md-12">

                  <div class="box box-primary">
                    <div class="box-header with-border" style="background-color: #ECF0F5;">

                    </div>


                    <div class="box-body" style="background-color: #ECF0F5;">

                      <!-- <input type="hidden" name="id" value="<?php echo $row_brand["item_id"]; ?>"> -->
                      <input type="hidden" name="brand_id" value="<?php echo $row_brand["brand_id"]; ?>">
                      <input type="hidden" name="category_id"value="<?php echo $row_category["category_id"]; ?>">
                      <div class="form-group col-md-12">



                        <label for="brand">Brand</label>
                        <select class="form-control" id="edit_brand_id" name="brand_id" disabled required autofocus="">
                          <option value="" disabled selected>Choose Brand</option>

                          <?php foreach ($all_brand as $row_brand) { ?>
                            <option value="<?php echo $row_brand["brand_id"]; ?>"><?php echo $row_brand["brand_name"]; ?></option>
                          <?php } ?>
                        </select>

                        <label for="category">Category</label>
                        <select class="form-control" id="edit_category_id" name="category_id" disabled required="">
                          <option value="1" disabled selected>Choose category</option>
                          <?php foreach ($all_category as $row_category) { ?>
                            <option value="<?php echo $row_category["category_id"]; ?>"><?php echo $row_category["category_name"]; ?></option>
                          <?php } ?>
                        </select>

                        <label for="item_name"><b>Item Name</b>
                          <font color="red">
                            <p style="font-size: 8px;"><b>
                                <?php echo form_error('item_name'); ?></b></p>
                          </font>
                        </label>
                        <input onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" type="text" value="<?php echo set_value('item_name'); ?>" class="form-control" id="edit_item_name" name="item_name">






                        <label for="price"><b>Price</b>
                          <font color="red">
                            <p style="font-size: 8px;"><b>
                                <?php echo form_error('price'); ?></b></p>
                          </font>
                        </label>
                        <input onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" type="text" value="<?php echo set_value('price'); ?>" id="edit_price" class="form-control" name="price" required autofocus="">


                        <label for="status">Status</label>
                        <select class="form-control" id="edit_status" name="status">
                          <option value="1">Registered</option>
                          <option value="2">Alloted</option>
                          <option value="3">Maintenance</option>
                          <option value="4">Retired</option>
                        </select>

                        <label for="type">Type</label>
                        <select class="form-control" id="edit_type_id" name="type_id">
                          <option value="1" disabled selected>Choose Type</option>
                          <?php foreach ($all_type as $row_type) { ?>
                            <option value="<?php echo $row_type["type_id"]; ?>"><?php echo $row_type["type_name"]; ?></option>
                          <?php } ?>
                        </select>

                        <!-- <label for="user_id">Select User</label>
                        <select class="form-control" id="edit_user_id" name="user_id">
                          <option value="1" disabled selected>Choose user</option>
                          <//?php foreach ($all_user as $row_user) { ?>
                            <option value="<//?php echo $row_user["user_id"]; ?>"><//?php echo $row_user["u_name"]; ?></option>
                          <//?php } ?>
                        </select>  -->

                        <!-- <label for="user">Select User</label>
                        <select class="form-control" id="edit_user_id" name="user_id">
                          <//?php foreach ($all_user as $row_user) { ?>
                            <//?php if ($row_user["user_id"] == $selected_user_id) { ?>
                              <option value="<//?php echo $row_user["user_id"]; ?>" selected><//?php echo $row_user["u_name"]; ?></option>
                            <//?php } else { ?>
                              <option value="<//?php echo $row_user["user_id"]; ?>"><//?php echo $row_user["u_name"]; ?></option>
                            <//?php } ?>
                          <//?php } ?>
                        </select> -->

                        <!-- <label for="comment"><b>Remarks</b>
                          <font color="red">
                            <p style="font-size: 8px;"><b>
                                <//?php echo form_error('comment'); ?></b></p>
                          </font>
                        </label>
                        <input onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" type="text" value="<//?php echo set_value('comment'); ?>" class="form-control" id="edit_remarks" name="comment">
 -->


                        <br>
                        <div class="col-md-4">
                          <label for="purchase_date"><b>Purchase Date</b></label>

                          <input type="date" class="form-control" id="edit_purchase_date" disabled name="purchase_date" value="" required autofocus>
                        </div>
                        <div class="col-md-4">
                          <label for="maintenance_due_date"><b>Maintenance Due Date</b></label>

                          <input type="date" class="form-control" data-mask name="maintenance_due_date" id="edit_maintenance_due_date" value="" required autofocus>
                        </div>
                      </div>
                      <input type="hidden" value="<?php echo ($this->session->userdata['logged_in']['user_id']); ?>" id="edit_by_user" class="form-control" name="by_user" required>
                      <input type="hidden" value="1" class="form-control" name="type" required>
                      <input type="hidden" value="0" class="form-control" name="requisition_slip_id" required>
                    </div>
                    <div class="box-footer" style="background-color: #ECF0F5;">
                      <button type="submit" id="editsubmitbtn" style="width: 20%;float: left;" class="btn btn-success">Update</button>
                      <a href="<?php echo base_url() . "Add_Item/show_item" ?>">
                        <button type="button" style="width: 20%;float: left;margin-left: 5%;" class="btn btn-primary">Cancel</button></a>
                    </div>
                  </div>

                </div>

              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
edit modal end

 <script>
    $(document).ready(function() {
      $('.open-update-modal-btn').click(function() {
        var rowData = $(this).data('item');

        console.log("______");
        console.log(rowData);
        console.log(rowData.item_id);
        //console.log(rowData.type_id);
        console.log(rowData.user_id);

        // Populate your modal or form fields with the retrieved data
        $('#item_id').val(rowData.item_id);
        $('#edit_brand_id').val(rowData.brand_id);
        $('#edit_category_id').val(rowData.category_id);
        $('#edit_item_name').val(rowData.item_name);
        $('#edit_price').val(rowData.price);
        $('#edit_status').val(rowData.status);
        $('#edit_type_id').val(rowData.type_id);
        $('#edit_purchase_date').val(rowData.purchase_date);
        $('#edit_remarks').val(rowData.remarks);
        $('#edit_maintenance_due_date').val(rowData.maintenance_due_date);
        $('#edit_by_user').val(rowData.by_user);
        // Populate other fields in your modal or form as needed
      });


      $('#editsubmitbtn').on('click', function(e) {
        e.preventDefault(); // Prevent the default form submission

        // Get form data
        var formData = $('#editForm').serialize();

        console.log(formData);
        // Send AJAX request
        $.ajax({
          url: '<?php echo base_url("Add_Item/update_item_id"); ?>',
          type: 'POST',
          data: formData,
          success: function(response) {
            if (response) {
              alert('Data updated successfully: ' + response);
              console.log('Data updated successfully:', response);
              $('#editNewItemModal').modal('hide');
              // Optionally, close the modal or perform any other actions
            } else {
              alert('Error: ' + response);
            }
          },
          error: function(xhr, status, error) {
            // Handle errors here
            console.log(error); // Log the error to the console for debugging
          }
        }); // <-- Here's the missing closing bracket
      });
    });
  </script>
show_item.php
this is my ajax request.

this is my controller Add_Item.php

 function update_item_id()

    {
        $id = $this->input->post('id');
       // var_dump($id);
        $data = array(
            
            'brand_id'=>$this->input->post('brand_id'),
            'category_id'=>$this->input->post('category_id'),
            'item_name' => $this->input->post('item_name'),
            'price' => $this->input->post('price'),
            'status' => $this->input->post('status'),
            'type_id' => $this->input->post('type_id'),
            'purchase_date'=>$this->input->post('purchase_date'),
            'maintenance_due_date' => $this->input->post('maintenance_due_date'),
            'by_user' => $this->input->post('by_user'),
        );
       // var_dump($id, $data); // Debugging

        $result=$this->Itnhs->update_item_id($id, $data);
       
        // var_dump(  $this->Itnhs->update_item_id($id, $data));
       // $updatedData = $this->Itnhs->show_item_id($id);
       // var_dump($data);
      if ($this->db->affected_rows() > 0) {
        // Fetch the updated data (if needed)
        //$updatedData = $this->Itnhs->show_item_id($id);
       //var_dump($result);
        // Return a JSON response with success status, message, and updated data
        if ($result) {
            // Data updated successfully
            echo json_encode(array('success' => true, 'message' => 'Item edited Successfully'));
        } else {
            // Failed to update data
            echo json_encode(array('success' => false, 'message' => 'Failed to edit item.'));
        }
   
        
    
        // Send JSON response
       // $this->output->set_content_type('application/json')->set_output(json_encode($response));
    
   //     redirect("Add_Item/show_item");
    }
}

I’m currently trying to create a web project with a Vue 3 JS frontend and a SWI Prolog Backend (github repo). My only dependency is Tailwind CSS.

To run my backend (localhost:8000; the only url that I set up is localhost:8000/api), I run:

swipl -s server.prolog

To run my frontend (localhost:8080), I run:

npm run serve

The problem I’m encountering is this:

Access to fetch at 'http://localhost:8000/api' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I attempt to make an HTTP POST request from Vue (localhost:8080) using fetch api. I use a single header Content-type: text/plain, and give it some basic data.

Then, on the other end (localhost:8000/api), I have a response with these headers:

• Content-type: text/plain
• Access-Control-Allow-Origin: *

And some basic data to go with it.

I’m struggling to figure out why fetch is telling me these is no ‘Access-Control-Allow-Origin’ header when I set one.

I know this is a lot of information but it’s probably a problem with CORS and I don’t get what I’m missing here. I’m grateful to any that offer their aid. Thank you and I love you.

I am a new js programmer. I can’t figure out how to make this code work!

const button = document.querySelector('button');
const body = document.querySelector('body');

let buttonIsClicked = false;

button.onclick = () =>{
    buttonIsClicked = true;
}

if ( buttonIsClicked == true ) {
    body.style.backgroundColor = 'white';
} else {
    body.style.backgroundColor = 'black';
}

I tried googleing it, but I cant figure it out.

It is possible to retrieve information entered into cells in a spreadsheet.
Next, how can we insert the information obtained in HTML into a text field as an initial value?
I have created it so far, but I am not able to dynamically insert a value into the initial value.

function onRemoveOrEditButton() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const initialValue = sheet.getRange("A1").getValue();
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Dialog').setWidth(300);
  htmlOutput.append('<script>var initialValue = ' + JSON.stringify(initialValue) + ';</script>');
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, ' ');
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet"/>
    <style>
      .form-control {
        width: 200px;
      }
    </style>
  </head>
  <body>
      <input class="form-control input-block" type="text" id="name" name="name" placeholder="name" style="width: 300px;" value= "<?= initialValue ?>"><br>

  </body>
</html>

This the way I'm adding row to table.


`function populateTable(data) {
    var tab = document.getElementById("updatetable");

// Iterate through the data and create table rows
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        var newRow = tab.insertRow();
        var newItemCell = newRow.insertCell();
        var newNumberCell = newRow.insertCell();
        var newRatingCell = newRow.insertCell();
        var newDurationCell = newRow.insertCell();
        var newUnitsCell = newRow.insertCell();
        newItemCell.textContent = key; // Assuming key is the field name

        // Create input elements
        var numberInput = document.createElement('input');
        numberInput.setAttribute('type', 'number');
        numberInput.setAttribute('id', `${key}Number`);
        newNumberCell.appendChild(numberInput);

        var ratingInput = document.createElement('input');
        ratingInput.setAttribute('type', 'number');
        ratingInput.setAttribute('id', `${key}Rating`);
        ratingInput.setAttribute('value', data[key]['fieldRating']);
        newRatingCell.appendChild(ratingInput);

        var durationInput = document.createElement('input');
        durationInput.setAttribute('type', 'number');
        durationInput.setAttribute('id', `${key}Duration`);
        newDurationCell.appendChild(durationInput);

        var unitsInput = document.createElement('input');
        unitsInput.setAttribute('type', 'number');
        unitsInput.setAttribute('id', `${key}Units`);
        newUnitsCell.appendChild(unitsInput);

    }
}

}`

i’m sending data to backend using this function.

` function saveData() {
// Get the current year and month
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.toLocaleString(‘default’, { month: ‘long’ });

// Get the working days input value
const workingDays = document.getElementById('workingdays').value;

// Get the table data from the update-main page
const tableRows = document.querySelectorAll('#updatetable tbody tr');
console.log(tableRows);
console.log(workingDays);
console.log(currentMonth);
console.log(currentYear);
// Array to store all the row data
const rowDataArray = [];

tableRows.forEach(row => {
    const cells = row.getElementsByTagName('td');
    
    // Extract data from each cell
    const item = cells[0].textContent.trim(); // Assuming the first cell contains the item name
    const numberInput = row.querySelector('input[type="number"][id$="Number"]');
    const ratingInput = row.querySelector('input[type="number"][id$="Rating"]');
    const durationInput = row.querySelector('input[type="number"][id$="Duration"]');
    const unitsInput = row.querySelector('input[type="number"][id$="Units"]');

    // Create an object to represent the row data
    const rowData = {
        item: item,
        numberOfItems: parseInt(numberInput.value) || 0,
        ratingKW: parseInt(ratingInput.value) || 0,
        durationHours: parseInt(durationInput.value) || 0,
        unitsKWh: parseInt(unitsInput.value) || 0
    };

    // Push the row data object to the array
    rowDataArray.push(rowData);
});

// Send data to the backend
sendReportDataToBackend(currentYear, currentMonth, workingDays, rowDataArray);

}
`

I tried to send data , currentyear, currentMonth, workingDays are coming properly, but the tablerows are not getting selected.

I have a button which must navigate to the unanswered question in a survey page containing questions. I’ve got the logic to get to the first question. Now I’ve to navigate to it in the template. The questions are being generated in another component Questions. I’m getting an error that scrollToQuestion() is not a function.

SurveyButton component

<script>
import GenerateQuestions.vue from './GenerateQuestions.vue';

export default {
  components: {
    'questionsComponent':GenerateQuestions
  },
  data() {
    return {
      allQuestions: [] // Your array of questions
    };
  },
  mounted() {
    this.scrollToQuestionWithNullResponse();
  },
  methods: {
    scrollToQuestionWithNullResponse() {
      const nullResponseQuestion = this.allQuestions.find(question => question.responseId === null);
      if (nullResponseQuestion) {
        // Ensure that the ref points to the correct component
        const questionsComponent = this.$refs.questionsComponent;
        if (questionsComponent && questionsComponent.scrollToQuestion) {
          questionsComponent.scrollToQuestion(nullResponseQuestion.id);
        } else {
          console.error("scrollToQuestion method is not available in the Questions component.");
        }
      }
    }
  }
};
</script>

GenerateQuestions.vue: Here the questions are generated in the template and I need to scroll to the null response question in the template

<template>
  <div>
    <v-card v-for="(question, index) in data" :key="question.ItemId" :ref="'questionRef_' + index">
      <!-- Render your question content here -->
      {{ question.text }}
    </v-card>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    scrollToQuestion(questionId) {
      const index = this.data.findIndex(question => question.ItemId === questionId); 
      if (index !== -1) {
        const questionElement = this.$refs['questionRef_' + index];
        if (questionElement) {
          questionElement.scrollIntoView();
        }
      }
    }
  }
};
</script>