I am creating a website for a puzzle/hunt and the first page will display a input box only which requires a password. I would like it that if the password is entered incorrectly then the input box will be hidden but also never show up again unless I change it in the editor.
I have tried using data collections, Local storage and data sets with no luck.
With data collections, I tried creating an entry with a number value 1 and reading the value and based on the number it would either display or hide the input box (password) and once the password was entered correctly it would change the value in the collection to 0. This worked however it seems to only work in preview mode and not all the time. viewing the site published would not change the dataset or it would just reset after the page was reloaded.
I am able to hide the input box but not being able to keep it hidden for anyone else to view the page.
Is there a simple way in which I can solve this issue?
$w.onReady(function () {
} );
/*
Create a database with a boolean variable for the first event of the first password.
if the password is correct then change the boolean value in the database to be true so when you refresh the page it will not restart the password inputbox.
once the value is correct display the next page/ event for the hunt.
If database does not work try wix-storage/memory
*/
export function pass1_keyPress(event) {
let myValue = $w("#pass1").value; //
if (myValue === "1234"){
$w("#pass1").hide("fade");
$w("#horaa").show("fade");
}
}
let password = "Pass";
$w.onReady(function () {
//query collection for the relevant boolean value
//proceed based on the result (e.g. hide if wrong, else if correct)
} );
export function button_onClick(event) {
if ($w('#input').value !== password) {
//hide relevant elements
//update the collection field value
}
else {
//proceed with the correct password flow
}
Once the page loads query the database with the field that contains the result of the password entry (e.g. boolean field that represents if the password was entered correctly or not).
If correct, display relevant items, if not - hide.
On button (e.g. submit password) click event, check if the entered password was correct or not)
If correct, display relevant items, if not - hide.
Update the database boolean field value.
If you have further issues, please provide a link to the page with the code, a clear description of the issue, and the lines of code you use.
I seem to have trouble using the query function with my database/collections.
I have added two ways to get the information but get errors for the query: ’ The keydata collection does not exist. You cannot work with a collection using the Data API before it is created in the Editor’
There seemed to be a solution to this but does not help me from what I can see: community discussion
import wixData from 'wix-data';
import {local} from 'wix-storage';
let password = "pass";
$w.onReady(function () {
datacol ();
} );
/*
Create a database with a boolean variable for the first event of the first password.
if the password is correct then change the boolean value in the database to be true so when you refresh the page it will not restart the password inputbox.
once the value is correct display the next page/ event
*/
//let myValue = $w("#myElement").value;
function datacol () {
$w.onReady( () => {
$w("#keydata").onReady( () => {
let itemObj = $w("#keydata").getCurrentItem();
console.log(itemObj);
} );
$w('#keydata').onReady(() => {
wixData.query('keydata')
.find()
.then( (results) => {
console.log(results.items);
} );
});
} );
}
export function pass1_keyPress(event) {
if ($w('#pass1').value !== password) {
//hide relevant elements
$w("#horaa").hide("fade");
$w("#pass1").show("fade");
//update the collection field value
}
else {
$w("#pass1").hide("fade");
$w("#horaa").show("fade");
//proceed with the correct password flow
}
}
Few images showing the results from the console log and database:
Managed to solve my problem using Dataset. I was not able to use the query statement for this.
let password = "pass";
$w.onReady(function () {
//When the page is ready it will wait for the dataset to be ready before getting the item in the dataset
$w("#keydata").onReady( () => {
let boolcheck = $w("#keydata").getCurrentItem().boolpass;
console.log(boolcheck);
if (boolcheck !== true) {
//password was not correct previously
$w("#horaa").hide("fade");
$w("#pass1").show("fade");
} else {
//password was correct
$w("#pass1").hide("fade");
$w("#horaa").show("fade");
}
} );
} );
//Password input section
export function pass1_keyPress(event) {
if ($w('#pass1').value !== password) {
//hide relevant elements
$w("#horaa").hide("fade");
$w("#pass1").show("fade");
}
else {
$w("#pass1").hide("fade");
$w("#horaa").show("fade");
//Updates the boolean value in the dataset
$w("#keydata").setFieldValue("boolpass", "true");
$w("#keydata").save();
}
}
