I am currently trying to design a grading functionality for some web app, which allows the teachers to create their own papers and specify/set the grading logic(based on several dimensions)

The tech stack for the front is Vue

For now, I am stuck at the last step – the design of UI,especially the grading part, what I want to implement is like below (suppose the grading is based on the scores of two dimensions say, D1 D2),

A: D1 >= 75 && D2 >= 80 && Total >= 75(total is calculated by some weights and each dimensions scores)

B: D1 >= 60 || D2 >= 70 || Total >= 60

C: …..

D:

Like the above what I want to implement is to allow the paper manager customize the logic of each grading, which means they can fill out the upper/lower bound of each dimension and total score and also set AND/OR logic to chain the whole together, additionaly, you need absoultely need to do some validation like make sure for each student’s score, there will be only and exact one coresponding grading.

Is there any existing well-built solution/library for that based on Vue?

Please let me know if need more info/details.

I have a question that I hope you can help me with.

I am working on a function that when scrolling will fix the section on top.
similar to css sticky.
However, when scrolling, scrollTop is always greater than elementOffset, which causes the section to float past the section before window.scrollTo(0, elementOffset), which makes fixing the section unnatural.
I cannot use position sticky because the section needs to have a fixed height.
I hope to get help from you.
Thanks

    <script>
      document.addEventListener("DOMContentLoaded", () => {

        const scrollElement = document.getElementById("scroll_element");
        const elementOffset = scrollElement.offsetTop;

        function handleScroll() {
          const scrollTop =
            window.pageYOffset || document.documentElement.scrollTop;
          if (scrollTop >= elementOffset) {
            window.scrollTo(0, elementOffset);
          }
        }

        window.addEventListener("scroll", handleScroll);
      });
    </script>

I have a website made from a single page template but I’m expanding it to be multi-page. In my nav-bar I have links to subsections of my pages using references like <a href="./index.html#sectionid"> and <a href="./other-page.html#sectionid2">. My anchor links are pointing to section elements like this <section id="sectionid>.

I expected that no matter what page I was on, the nav bar link would would take me to the referenced page and sub-section. But specifically when I’m not on the home page and linking to a subsection of the home page, this doesn’t happen. It links to the top of the home page.

Links work correctly if:

• I am on the index page and click the link to other-page.html#sectionid2.
• I am on the index page and click the link to index.html#sectionid.
• I am on literally any page and click the link to other-page.html#sectionid2.

But the links DON’T work correctly if:

• I’m on any non-index.html page and I click the link to a subsection of the index page (index.html#sectionid). It takes me to the top of my index page, not to the subsection.

It DOES work when I:

• disable javascript
• add a breakpoint in main.js and step through it (what??)

I reviewed my main.js file and nothing seems to be hijacking the links, but there are some frameworks at play (bootstrap, smooth scrolling, aos, and a preloader). But just to be sure, I tried commenting out sections of my javascript file one by one, and no individual javascript function seemed to be the cause – the behavior persisted.

Other things I checked that weren’t the issue/didn’t yield results:

• typos in anchor or id
• uniqueness of id value
• base tags (I have none)
• using name=”sectionid” instead of id=”sectionid”
• updating hrefs to absolute links instead of relative
• compared the html on the pages where anchor tags work from other pages to the html on my home page – no significant differences
• clearing my cookies/cache
• a different browser – I’m in the latest version of chrome and I tried safari just for kicks

When I run this, it doesn’t run the function when I click the button, however it is run once when the website is loaded/reloaded even though (as far as I can tell) the code doesn’t do that at any point. I am using the DuckDuckGo browser. I don’t have much experience in HTML or JS. This is just for personal use, and doesn’t need to be supported on anything except DuckDuckGo.

Here is the HTML (filepath is index.html):

<html lang="en">
    <link rel="stylesheet" href="CSS/index.css">
    
    <body>
        <script src="Scripts/scrambleGen.js"></script>
        <div>
            <p id="scramble"></p>
            <button id="nextScramble">Next</button>
            <script>
                document.getElementById("nextScramble").addEventListener("click", scrambleGen(document.getElementById("scramble")));
            </script>
        </div>

        <div>
            <p id="timeInput"></p>
        </div>
    </body>
</html>

Here is the JS (filepath is “Scripts/scrambleGen.js”):

function scrambleGen(textBox)
{
  scramble = "";
  const moves = ["R","R2","R3","L","L2","L3","U","U2","U3","D","D2","D3","F","F2","F3","B","B2","B3"];
  lastMove = "";
  for (let i = 0; i < 30; i++)
  {
    move = moves[randomInt(0,17)]
    if (lastMove.substring(0,1) == move.substring(0,1))
    {
      move = move.substring(0,1) + (parseInt(move.substring(1), 10) + parseInt(lastMove.substring(1), 10)).toString();
    }
    else
    {
      if (lastMove[1] != undefined) 
      {
        if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 1)
        {
          scramble += lastMove.substring(0,1);
          scramble += " ";
        }
        else if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 2)
        {
          scramble += lastMove.substring(0,1) + "2";
          scramble += " ";
        }
        else if (((parseInt(lastMove.substring(1), 10) % 4).toString(10)) == 3)
        {
          scramble += lastMove.substring(0,1) + "'";
          scramble += " ";
        }
      }
      else 
      { 
        scramble += lastMove; 
        scramble += " "; 
      }
    }
    lastMove = move;
  }
  textBox.innerText = scramble;
}
function randomInt(min, max) 
{
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

How do I make the first character of every word of a string uppercase in JavaScript.

for example: “this is my string” to “This Is My String”

I’ve already written the following solution, and it works perfectly. I’m just posting this to become a part of the community and ask if there are any edge cases, improvements, or alternative approaches you’d recommend.

let str = "this is my string";
let result = str
  .split(" ")
  .map(word => word.charAt(0).toUpperCase() + word.slice(1))
  .join(" ");
console.log(result); // "This Is My String"

I am trying to avoid getting a csp (Content Security Policy) error when deferring css with a script that has a nonce attribute.
This is my attempt:

function x_style_loader_tag($html, $handle, $href) {
$async_loading = array(
        'cookie_notice'
);
if( in_array($handle, $async_loading) ) {
    $script = '<script nonce="'.apply_filters("TOA_PLUGIN/nonce_scriptx", NULL).'">'.
        'let s = document.createElement('link'); '.
        //'s.id = "'.$handle.'"; '.
        's.rel = "stylesheet"; '.
        's.href = "'.$href.'"; '.
        's.media = "print"; '.
        's.onload = "this.onload=null;this.media='all'"; '.
        'document.head.appendChild(s); '.
        '</script>';
    $html = $script;
}
return $html;
}
add_filter('style_loader_tag', 'x_style_loader_tag', 10, 3);

Inspecting the <head> i get:

<link rel="stylesheet" href="http://localhost:8888/wordpress/wp-content/themes/archiv/css/cookie_notice.css" media="print">

The attribute media="print" hasn’t been swapped to media="all" by the onload attribute in the javascript. How do i have to write this onload attribute to make this work?

I’m trying to estimate how many QPS an SSR application can theoretically handle.

Let’s say a request into an SSR server (like next or nuxt) and reponse a html took 6ms, and there’s no asynchronous logic, just 6ms for node enviroment execute the JS code.

In my understanding, JS as a single thread language, only excute a code segment at a time, so the QPS is 166.66 (1000ms / 6ms)

And if there’s a asynchronous logic in serverside enviroment like
await new Promise((resolve, reject) => setTimeout(() => resolve(), 200))
then the QPS should be 133 (1000ms – 200ms / 6ms)

But when I try to use ab like

ab -n 100 -c 100

the QPS of result is way more higher than my estimate

I don’t know am I even right ?

I’m working on a custom WordPress theme and using Flexbox to build a responsive layout. One of my flex items (e.g., a card or sidebar element) is overflowing its parent container on smaller screens, even though I’m using flex-wrap: wrap and setting max-width values.

Here’s a simplified version of the CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
  max-width: 100%;
}

Despite this setup, the .item sometimes breaks the container width, especially when nested inside WordPress blocks or when a large image or long word is inside it.

What’s the best approach to make sure the flex item always stays inside the container on all screen sizes, especially in dynamic WordPress environments?

Things I’ve tried:

Adding overflow: hidden or auto

Setting min-width: 0

Wrapping inside another div with width: 100%

Still no consistent results.

Any ideas or best practices for solving this in a WordPress context?

Thanks in advance!

I hope someone can help me, I’m working in surveyjs, specifically in survey-creator, I want to create a custom class that extends panelmodel, but when trying to add it to survey-creator it gives the error Uncaught (in promise) TypeError: e.isDefaultRendering is not a function

const creatorOptions = {
  showLogicTab: true,
  isAutoSave: true,
};


const creator = new SurveyCreator.SurveyCreator(creatorOptions);

class MyCustomClass extends Survey.Question {
  getType() {
    return "my-custom-class";
  }
  get myCustomProperty() {
    return this.getPropertyValue("myCustomProperty");
  }
  set myCustomProperty(val) {
    this.setPropertyValue("myCustomProperty", val);
  }
}

Survey.ElementFactory.Instance.registerElement("my-custom-class", (name) => {
  return new MyCustomClass(name);
});

Survey.Serializer.addClass(
  "my-custom-class",
  [{
    name: "myCustomProperty",
    category: "general",
    visibleIndex: 2
  }],
  function () {
    return new MyCustomClass("");
  },
  "question"
);

creator.toolbox.addItem({
  name: "my-custom-class",      // mismo que getType()
  title: "question Personalizado", 
  iconName: "icon-panel",     // nombre del icono (debe existir o ser uno genérico)
  json: {
    type: "my-custom-class",
    name: "panelPersonalizado1",
    elements: []
  },
  isCopied: true              // para que se arrastre/copiar al survey
});

creator.render("surveyCreatorContainer");

I’m starting to practice with JavaScript and I’m stuck because I can’t find a way to import a .js file that only contains data from another file that contains the code that will use the data.
I’ve tried import, use, and require, but I always get the same error.

somedata.js

myhost = “localhost”;
myuser = “root”;
mypassword =  “dumb”;
mydatabase = “yourdb”;
valid_values = [‘P’,‘M’,'S',‘CM’,‘CP’,‘CS’,‘VM’,‘VP’,‘VS’,‘EM’,‘EP’,‘ES’,‘AM’,‘AP’,‘AS’,‘BM’]
headers = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’]

mainfile.js

use(somedata.js)    <---```ReferenceError: use is not defined```
require(somedata.js)   <----```ReferenceError: somedata is not defined```
import(somedata.js)   <----```ReferenceError: somedata is not defined```

mysql = require(‘mysql’);
con = mysql.createConnection({
host: myhost,
user: myuser
password: mypassword,
database: mydatabase
});
con.connect(function(err) {
query =“SELECT * FROM table WHERE year= ? AND month = ?”
 var year = 2025
 var month = ‘7’
 if (err) throw err;
    con.query(query, [year, month], function (err, result) {
        if (err) throw err;
        console.log(result);
        con.end()
    });
});

I currently have 3 javascript files displaying GEOJSON as overlays on my Leaflet Map . How can I group them together to have just one toggle button in the Layer Controls.
Overlay 1 is Building
Overlay 2 is Footpaths
Overlay 3 is Gardens
but id like them all to toggle together under one name as a group layer
Heres my code

  <script src="OldBuildings.js"></script>
  <script src="footpaths.js"></script>
  <script src="gardens.js"></script>

These files are Geojson using a Var at the top of the File of the same name.

Code for Each Overlay=

var footpaths = L.geoJSON(footpaths, {
color: ‘black’,
fillColor: ‘white’,
weight:0.5,
fillOpacity: 0.9,

}
)

.addTo(map);

var gardens = L.geoJSON(gardens, {
color: ‘black’,
fillColor: ‘green’,
weight:0.5,
fillOpacity: 0.9,

}
)

.addTo(map);

var OldBuildings = L.geoJSON(OldBuildings, {
color: ‘black’,
fillColor: ‘grey’,
weight:0.5,
fillOpacity: 0.8,

}
)

.addTo(map);

var overlays = {
“Buildings”:OldBuildings,
“Footpaths”:footpaths,
“Gardens”:gardens
L.control.layers(baseLayers, overlays).addTo(map);

Currently being displayed as three seperate overlay control toggle buttons
Cheers T

Notion MCP Integration: “Expected object, received string” Error with Nested Parameters

I’m experiencing a consistent issue with the Notion MCP (Model Context Protocol) integration where nested object parameters are being incorrectly parsed as strings, causing all operations that require complex parent or data objects to fail.

Environment

• Integration: Notion MCP Server

• Client: Claude with MCP integration

• Issue: Parameter serialization/parsing bug with nested objects

Problem Description

When attempting to use Notion MCP functions that require nested object parameters, I consistently get validation errors indicating that objects are being received as strings.

Error Examples

1. Creating Pages in Database

Code:

{
  "pages": [
    {
      "properties": {
        "Name": "Test Item",
        "Status": "Not started",
        "Sub Group": "Ben"
      }
    }
  ],
  "parent": {
    "database_id": "15ee8129-6c2b-8010-ae07-c6b7bddd3c66",
    "type": "database_id"
  }
}

Error:

MCP error -32602: Invalid arguments for tool create-pages: [
  {
    "code": "invalid_union",
    "unionErrors": [
      {
        "issues": [
          {
            "code": "invalid_type",
            "expected": "object",
            "received": "string",
            "path": ["parent"],
            "message": "Expected object, received string"
          }
        ],
        "name": "ZodError"
      }
    ],
    "path": ["parent"],
    "message": "Invalid input"
  }
]

2. Moving Pages

Code:

{
  "page_or_database_ids": ["225e8129-6c2b-81f9-a6a6-ee10d9486331"],
  "new_parent": {
    "database_id": "15ee8129-6c2b-8010-ae07-c6b7bddd3c66",
    "type": "database_id"
  }
}

Error:

MCP error -32602: Invalid arguments for tool move-pages: [
  {
    "code": "invalid_union",
    "unionErrors": [
      {
        "issues": [
          {
            "code": "invalid_type",
            "expected": "object",
            "received": "string",
            "path": ["new_parent"],
            "message": "Expected object, received string"
          }
        ]
      }
    ]
  }
]

3. Updating Page Properties

Code:

{
  "data": {
    "page_id": "225e8129-6c2b-81f9-a6a6-ee10d9486331",
    "command": "update_properties",
    "properties": {
      "Name": "Updated Name",
      "Status": "Not started"
    }
  }
}

Error:

MCP error -32602: Invalid arguments for tool update-page: [
  {
    "code": "invalid_type",
    "expected": "object",
    "received": "string",
    "path": ["data"],
    "message": "Expected object, received string"
  }
]

What Works

Simple operations without nested objects work fine:

// This works ✅
{
  "pages": [
    {
      "properties": {
        "title": "Simple Page"
      }
    }
  ]
  // No parent parameter
}

What I’ve Tried

1. Different parameter formats: Tried various object structures and property names

2. Different database IDs: Used both page ID and collection ID formats

3. Simplified objects: Reduced nested objects to minimum required fields

4. Alternative functions: Same issue occurs across multiple MCP functions

Analysis

The issue appears to be in the parameter serialization layer where:

• Simple parameters (strings, arrays) are passed correctly

• Nested objects are being stringified somewhere in the MCP pipeline

• The Zod schema validation then fails because it receives a string instead of an object

Questions

1. Is this a known issue with the Notion MCP integration?

2. Are there workarounds for creating pages directly in databases?

3. Is there a different parameter format that works for nested objects?

4. Are there alternative approaches to achieve the same functionality?

Expected Behavior

The parent and data parameters should be passed as objects to the Notion API, allowing for proper database operations as documented in the Notion API specification.

Additional Context

• Authentication works fine (can fetch pages, search, etc.)

• Read operations work perfectly

• Issue only affects write operations with nested parameters

• Same database operations work fine via direct Notion API calls

Any insights or workarounds would be greatly appreciated!

Tags: notion-api, mcp, model-context-protocol, javascript, integration, parameter-serialization

I need to be able to parse a time string formatted like this: ’12:34:15′ along with a timezone. Obviously would have to add it to today’s date at 12am, and then parse it into a JavaScript date obj.

• Can use the Date() constructor with hours +- according to the input timezone but that has doesn’t account for daylight savings
• Can also use the Date.Parse() function but that has the same problem

Requirements of a solution:

• using a string formatted like ’12:34:15′, and a IANA timezone, convert the time into a JS date obj
• the date doesn’t actually matter, I just need the time adjusted to the timezone
• then from there convert that to UTC
• would like this to be vanilla JS if possible as this is running in the browser and I don’t want to include external packages

been scratching my head at this one for a while now. I am running Node/Express 5 to serve a simple web-app, I am also using ES modules on the JS end.

ERROR: POST /auth/register → 500 TypeError: Unexpected ( at 27, expected END: https://git.new/pathToRegexpError

I completely understand the error. When parsing one of my routes, path-to-regexp is finding a ‘(‘. I cannot find this for the life of me though. I have checked every single route and none exist. I have checked dependencies in my package.json, nothing. I have gone through the process of singling out the files with routes, and found that it is coming from my auth.js file. This is currently set to handle sign-ups to my service, creating a database object when signup is complete, and sending a confirmation email.

router.post('/register', async (req, res) => {
try {
const { username, password, email, first_name, last_name } = req.body;

// 1) basic validation
if (!username || !password || !email) {
  return res.status(400).json({ error: 'Missing fields' });
}

// 2) hash the password
const password_hash = await bcrypt.hash(password, 12);

// 3) verification token
const verification_token = uuidv4();

// 4) insert user
await pool.query(
  `INSERT INTO users
     (username, password, email, first_name, last_name, is_verified, verification_token)
   VALUES ($1,$2,$3,$4,$5,$6,$7)`,
  [ username, password_hash, email, first_name, last_name, false, verification_token ]
);

// 5) send confirmation email
const confirmUrl = `${process.env.BASE_URL}/auth/confirm?token=${verification_token}`;

await transporter.sendMail({
  from:    '"XXX" <[email protected]>',
  to:      email,
  subject: 'Confirm your email with XXX',
  html:    `<p>Click <a href="${confirmUrl}">here</a> to verify.</p>`
});

return res
  .status(201)
  .json({ message: 'Registered — please check your email' });

  } catch (err) {
console.error(
  `[${new Date().toISOString()}] ${req.method} ${req.originalUrl} → 500`,
  err
);
return res.status(500).json({ error: 'Registration failed' });
}
});

I am assuming this has something to do with the SQL query being put into the route, but I don’t understand how it is getting in there.

Hopefully someone else has insight to what is happening, I am clearly doing something wrong.

In a page i have a field like this with the Label field as Status and next to that it has the value and that also as Label.
Webpage content with Status value as Label

When i inspect the page code has below:
Html Code in Inspect

I am trying to get the value for the label Status.

How can i get the value of Status? ie: Pending payout