Highlighted

Password question

Community Beginner ,
Oct 08, 2018

Copy link to clipboard

Copied

I am trying to use a password form to connect multiple passwords to multiple pages. I’m a teacher and this is for an educational game in which students enter the correct password and it takes them to one page and later they enter another password and it takes them to another page. I’m a major beginner, too. This is a super simple website with an index that connects to the passwords page, then on to the selected page when users enter the password. I think I’ll have seven different passwords/pages total.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Below is a link to a  very low level JavaScript method.  If password is correct, script redirects user to a new HTML page.  

Cut and Paste JavaScript-Password protected page

Views

345

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Password question

Community Beginner ,
Oct 08, 2018

Copy link to clipboard

Copied

I am trying to use a password form to connect multiple passwords to multiple pages. I’m a teacher and this is for an educational game in which students enter the correct password and it takes them to one page and later they enter another password and it takes them to another page. I’m a major beginner, too. This is a super simple website with an index that connects to the passwords page, then on to the selected page when users enter the password. I think I’ll have seven different passwords/pages total.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Below is a link to a  very low level JavaScript method.  If password is correct, script redirects user to a new HTML page.  

Cut and Paste JavaScript-Password protected page

Views

346

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 08, 2018 0
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

do you mean that each student will have its own set of seven password, or do you mean that each page could have 7 different password...?

anyway it's pretty easy to handle such a configuration, but you will need some basics knowledge on code.

you have different way to approach it... one simple one will consist of having a keychain stored on the student record property:value... the property is the password, the value is the page to be reach, you 'll then have to memorise the step in which the student is located, first page, second page and so on... you'll then have to read in the key chain the appropriate pair of property/value

do you get the way ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

If your server supports PHP scripts, you can do this pretty easily without a database.

Copy this code into a new, blank document and save as index.php.  For this to work locally, you'll need a local testing server.  If you don't have one set-up just upload to your remote server to test it.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Password Protected</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

</style>

</head>

<body>

<div class="container">

<div class="row">

<?php

// Define your username and password here

$username = "admin";

$password = "pass123";

if (isset($_POST['txtUsername']) != $username || $_POST['txtPassword'] != $password) {

?>

<!--LOG-IN FORM-->

<div class="col-sm-4 center-block form-group">

<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<fieldset>

<legend>Log-In</legend>

<p><label for="txtUsername">Username:</label>

<br /><input type="text" class="form-control" title="Enter your Username" name="txtUsername" id="txtUsername" required/></p>

<p><label for="txtPassword">Password:</label>

<br /><input type="password" class="form-control" title="Enter your password" name="txtPassword" id="txtPassword" required/></p>

<button type="submit" class="btn btn-lg btn-primary">Submit</button>

</fieldset>

</form>

</div>

</div>

<?php

}

else {

?>

<!--PROTECTED CONTENT IS HIDDEN UNTIL USER LOGS IN-->

<div class="row">

<div class="col-sm-8 center-block">

<div class="alert-success text-center">

<h2>Log-In Success!</h2>

<p>You have reached a password protected area of this page. What would you like to do next?</p>

</div>

<!--Links to other pages-->

<ul class="nav nav-pills">

  <li role="presentation" class="active"><a href="#">Download Files</a></li>

  <li role="presentation"><a href="#">Upload Files</a></li>

  <li role="presentation"><a href="#">Watch Videos</a></li>

  <li role="presentation"><a href="#">Play a Game</a></li>

</ul>

<!--/col--></div>

<!--/row--></div>

<?php

}

?>

<!--END PROTECTED CONTENT-->

<!--/container--></div>

<!--latest jQuery minified-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Repeat for other password protected pages and name them all with a .php file extension.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

yep exactly, I had thought about the same approach first but I thought it would give a unique login/password for each page and therefore students could exchange it, hence the proposal of a solution based on an individual keychain instead

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

We don't know how secure this needs to be or the skill level of the person building it.   But I'm assuming they just need something simple to keep the kids engaged in the activity.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 1
Community Beginner ,
Oct 08, 2018

Copy link to clipboard

Copied

I don't even need a username.  I'll give an example.  So, the kid goes to the "passwords" link from the index page, clicks on it...that takes him/her to a gray screen that says, "enter password:" with a password box.  Once they enter a password (the correct one) that will take them to a new page that tells them which page to go to in their textbook, or takes them to a little game to play on a new page.  It's sort of like a scavenger hunt.  Does that make sense?  My skill level on a scale of 1-10 is about 1, and I'm giving myself that score based primarily on motivation.  I've got the basic html and CSS pages set up through Dreamweaver for most of the site.  I definitely think this is the hardest part of it.  Every thing else is pretty basic.  Thank you so much for all your help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
Community Beginner ,
Oct 08, 2018

Copy link to clipboard

Copied

Great thinking with the students cheating...but this isn't anything I'm worried about.  I just need to create a way for kids to enter a password, that will take them to a specified page.  For example, the kid does a math problem and the answer is the password.  They enter that password into the computer and it takes them to a new specified page that has a game on it as a reward.  No username is needed for any of the kids, either.  Thanks for the help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
Adobe Community Professional ,
Oct 08, 2018

Copy link to clipboard

Copied

it's not necessarily cheating, just an easier way to access the result...

anyway, do you still need help or did the trick that Nancy shows you is good enought?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 08, 2018 0
Community Beginner ,
Oct 09, 2018

Copy link to clipboard

Copied

What she provided is great, but it's not quite what I'm looking for.  It may be too complicated for me to do this, but I want to try.  An example is of this website...Sarah Fincher 

Just an empty box with a "submit" button that then connects the viewer to, in this case, a video.  I'd like it to connect the viewer/user to a new page.  Although this seems to be done through Adobe flash.  i tried to view the coding for this site, but I don't get it.  The whole PHP thing is super confusing to me.  Is there a simpler way?  Or do you have to have/use PHP any time with passwords or usernames because it has to check into the server?  I know my terminology is way off here, I don't know what I'm doing. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 0
Adobe Community Professional ,
Oct 09, 2018

Copy link to clipboard

Copied

HTML alone can't do this.  You must use a server-side or client-side script to check & confirm the password is valid and then if it is, peform another action.  In my example, it reveals hidden content on that password protected page. 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 1
Adobe Community Professional ,
Oct 09, 2018

Copy link to clipboard

Copied

Below is a link to a  very low level JavaScript method.  If password is correct, script redirects user to a new HTML page.  

Cut and Paste JavaScript-Password protected page

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 1
Community Beginner ,
Oct 09, 2018

Copy link to clipboard

Copied

Thanks so much to both of you!!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 09, 2018 0