Author Archives: Connie S.

Final Project Code

Posted on by

https://developers.google.com/maps/documentation/javascript/firebase

https://developers.google.com/maps/documentation/javascript/mysql-to-maps

 <!DOCTYPE html>
<html>
<%%KEEPWHITESPACE%%>  &lt;head&gt;
<%%KEEPWHITESPACE%%>    &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
<%%KEEPWHITESPACE%%>    &lt;meta charset="utf-8"&gt;
<%%KEEPWHITESPACE%%>    &lt;title&gt;Map Puzzle&lt;/title&gt;
<%%KEEPWHITESPACE%%>    &lt;style&gt;

<%%KEEPWHITESPACE%%>      #map {
<%%KEEPWHITESPACE%%>        height: 100%;
<%%KEEPWHITESPACE%%>      }

<%%KEEPWHITESPACE%%>      html, body {
<%%KEEPWHITESPACE%%>        height: 100%;
<%%KEEPWHITESPACE%%>        margin: 0;
<%%KEEPWHITESPACE%%>        padding: 0;
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    &lt;/style&gt;
<%%KEEPWHITESPACE%%>  &lt;/head&gt;
<%%KEEPWHITESPACE%%>  &lt;body&gt;
<%%KEEPWHITESPACE%%>    &lt;div id="map"&gt;&lt;/div&gt;
<%%KEEPWHITESPACE%%>    &lt;script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"&gt;&lt;/script&gt;
&lt;script&gt;
<%%KEEPWHITESPACE%%>  // Initialize Firebase
<%%KEEPWHITESPACE%%>  var config = {
<%%KEEPWHITESPACE%%>    apiKey: "AIzaSyCdUZeJTXzbqEXfVzskUFOoY-Mqh9TnyvU",
<%%KEEPWHITESPACE%%>    authDomain: "click-function-test.firebaseapp.com",
<%%KEEPWHITESPACE%%>    databaseURL: "https://click-function-test.firebaseio.com",
<%%KEEPWHITESPACE%%>    projectId: "click-function-test",
<%%KEEPWHITESPACE%%>    storageBucket: "click-function-test.appspot.com",
<%%KEEPWHITESPACE%%>    messagingSenderId: "257165968755"
<%%KEEPWHITESPACE%%>  };
<%%KEEPWHITESPACE%%>  firebase.initializeApp(config);
&lt;/script&gt;
<%%KEEPWHITESPACE%%>    &lt;script&gt;

function PuzzleDemo() {

<%%KEEPWHITESPACE%%>  this.polys_ = [];

<%%KEEPWHITESPACE%%>  this.difficulty_ = 'easy';

<%%KEEPWHITESPACE%%>  this.count_ = 0;

<%%KEEPWHITESPACE%%>  this.pieceDiv_ = null;

<%%KEEPWHITESPACE%%>  this.timeDiv_ = null;
}

PuzzleDemo.NUM_PIECES_ = 10;

PuzzleDemo.START_COLOR_ = '#3c79de';

PuzzleDemo.END_COLOR_ = '#037e29';

PuzzleDemo.prototype.init = function(map) {
<%%KEEPWHITESPACE%%>  this.map_ = map;
<%%KEEPWHITESPACE%%>  this.createMenu_(map);
<%%KEEPWHITESPACE%%>  this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%> this.loadData_();
};

PuzzleDemo.prototype.createMenu_ = function(map) {
<%%KEEPWHITESPACE%%>  var menuDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  menuDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'margin: 40px 10px; border-radius: 8px; height: 320px; width: 180px;' +
<%%KEEPWHITESPACE%%>      'background-color: white; font-size: 14px; font-family: Roboto;' +
<%%KEEPWHITESPACE%%>      'text-align: center; color: grey;line-height: 32px; overflow: hidden';
<%%KEEPWHITESPACE%%>  var titleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  titleDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'width: 100%; background-color: #4285f4; color: white; font-size: 20px;' +
<%%KEEPWHITESPACE%%>      'line-height: 40px;margin-bottom: 24px';
<%%KEEPWHITESPACE%%>  titleDiv.innerText = 'Game Options';
<%%KEEPWHITESPACE%%>  var pieceTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  pieceTitleDiv.innerText = 'PIECE:';
<%%KEEPWHITESPACE%%>  pieceTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var pieceDiv = this.pieceDiv_ = document.createElement('div');
<%%KEEPWHITESPACE%%>  pieceDiv.innerText = '0 / ' + PuzzleDemo.NUM_PIECES_;
<%%KEEPWHITESPACE%%>  var timeTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  timeTitleDiv.innerText = 'TIME:';
<%%KEEPWHITESPACE%%>  timeTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var timeDiv = this.timeDiv_ = document.createElement('div');
<%%KEEPWHITESPACE%%>  timeDiv.innerText = '0.0 seconds';
<%%KEEPWHITESPACE%%>  var difficultyTitleDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  difficultyTitleDiv.innerText = 'DIFFICULTY:';
<%%KEEPWHITESPACE%%>  difficultyTitleDiv.style.fontWeight = '800';
<%%KEEPWHITESPACE%%>  var difficultySelect = document.createElement('select');
<%%KEEPWHITESPACE%%>  ['Easy', 'Moderate', 'Hard', 'Extreme'].forEach(function(level) {
<%%KEEPWHITESPACE%%>    var option = document.createElement('option');
<%%KEEPWHITESPACE%%>    option.value = level.toLowerCase();
<%%KEEPWHITESPACE%%>    option.innerText = level;
<%%KEEPWHITESPACE%%>    difficultySelect.appendChild(option);
<%%KEEPWHITESPACE%%>  });
<%%KEEPWHITESPACE%%>  difficultySelect.style.cssText =
<%%KEEPWHITESPACE%%>      'border: 2px solid lightgrey; background-color: white; color: #4275f4;' +
<%%KEEPWHITESPACE%%>      'padding: 6px;';
<%%KEEPWHITESPACE%%>  difficultySelect.onchange = function() {
<%%KEEPWHITESPACE%%>    this.setDifficulty_(difficultySelect.value);
<%%KEEPWHITESPACE%%>    this.resetGame_();
<%%KEEPWHITESPACE%%>  }.bind(this);
<%%KEEPWHITESPACE%%>  var resetDiv = document.createElement('div');
<%%KEEPWHITESPACE%%>  resetDiv.innerText = 'Reset';
<%%KEEPWHITESPACE%%>  resetDiv.style.cssText =
<%%KEEPWHITESPACE%%>      'cursor: pointer; border-top: 1px solid lightgrey; margin-top: 18px;' +
<%%KEEPWHITESPACE%%>      'color: #4275f4; line-height: 40px; font-weight: 800';
<%%KEEPWHITESPACE%%>  resetDiv.onclick = this.resetGame_.bind(this);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(titleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(pieceTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(pieceDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(timeTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(timeDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(difficultyTitleDiv);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(difficultySelect);
<%%KEEPWHITESPACE%%>  menuDiv.appendChild(resetDiv);
<%%KEEPWHITESPACE%%>  map.controls[google.maps.ControlPosition.TOP_LEFT].push(menuDiv);
};

PuzzleDemo.prototype.render = function(map) {

<%%KEEPWHITESPACE%%>  if (!this.dataLoaded_) {
<%%KEEPWHITESPACE%%>    return;
<%%KEEPWHITESPACE%%>  }
<%%KEEPWHITESPACE%%>  this.start_();
};

PuzzleDemo.prototype.loadData_ = function() {
<%%KEEPWHITESPACE%%>  var xmlhttpRequest = new XMLHttpRequest;
<%%KEEPWHITESPACE%%>  xmlhttpRequest.onreadystatechange = function() {
<%%KEEPWHITESPACE%%>    if (xmlhttpRequest.status != 200 ||
<%%KEEPWHITESPACE%%>        xmlhttpRequest.readyState != XMLHttpRequest.DONE) return;
<%%KEEPWHITESPACE%%>    this.loadDataComplete_(JSON.parse(xmlhttpRequest.responseText));
<%%KEEPWHITESPACE%%>  }.bind(this);
<%%KEEPWHITESPACE%%>  xmlhttpRequest.open(
<%%KEEPWHITESPACE%%>      'GET', 'https://storage.googleapis.com/mapsdevsite/json/puzzle.json',
<%%KEEPWHITESPACE%%>      true);
<%%KEEPWHITESPACE%%>  xmlhttpRequest.send(null);
};

PuzzleDemo.prototype.loadDataComplete_ = function(data) {
<%%KEEPWHITESPACE%%>  this.dataLoaded_ = true;
<%%KEEPWHITESPACE%%>  this.countries_ = data;
<%%KEEPWHITESPACE%%>  this.start_();
};

PuzzleDemo.prototype.setDifficulty_ = function(difficulty) {
<%%KEEPWHITESPACE%%>  this.difficulty_ = difficulty;

<%%KEEPWHITESPACE%%>  if (this.map_) {
<%%KEEPWHITESPACE%%>    this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.setDifficultyStyle_ = function() {
<%%KEEPWHITESPACE%%>  var styles = {
<%%KEEPWHITESPACE%%>    'easy': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'labels',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'geometry',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' },
<%%KEEPWHITESPACE%%>         { weight: 1.3 }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'moderate': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }, {
<%%KEEPWHITESPACE%%>        featureType: 'administrative.country',
<%%KEEPWHITESPACE%%>        elementType: 'labels',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>         { visibility: 'on' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'hard': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'water',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>            { visibility: 'on' },
<%%KEEPWHITESPACE%%>            { color: '#d4d4d4' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      },{
<%%KEEPWHITESPACE%%>        featureType: 'landscape',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'on' },
<%%KEEPWHITESPACE%%>          { color: '#e5e3df' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ],
<%%KEEPWHITESPACE%%>    'extreme': [
<%%KEEPWHITESPACE%%>      {
<%%KEEPWHITESPACE%%>        elementType: 'geometry',
<%%KEEPWHITESPACE%%>        stylers: [
<%%KEEPWHITESPACE%%>          { visibility: 'off' }
<%%KEEPWHITESPACE%%>        ]
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    ]
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  this.map_.set('styles', styles[this.difficulty_]);
};

PuzzleDemo.prototype.resetGame_ = function() {
<%%KEEPWHITESPACE%%>  this.removeCountries_();
<%%KEEPWHITESPACE%%>  this.count_ = 0;
<%%KEEPWHITESPACE%%>  this.setCount_();
<%%KEEPWHITESPACE%%>  this.startClock_();

<%%KEEPWHITESPACE%%>  this.addRandomCountries_();
};

PuzzleDemo.prototype.setCount_ = function() {
<%%KEEPWHITESPACE%%>  this.pieceDiv_.innerText = this.count_ + ' / ' + PuzzleDemo.NUM_PIECES_;

<%%KEEPWHITESPACE%%>  if (this.count_ == PuzzleDemo.NUM_PIECES_) {
<%%KEEPWHITESPACE%%>    this.stopClock_();
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.stopClock_ = function() {
<%%KEEPWHITESPACE%%>  window.clearInterval(this.timer_);
};

PuzzleDemo.prototype.startClock_ = function() {
<%%KEEPWHITESPACE%%>  this.stopClock_();

<%%KEEPWHITESPACE%%>  var timeDiv = this.timeDiv_;
<%%KEEPWHITESPACE%%>  if (timeDiv) timeDiv.textContent = '0.0 seconds';
<%%KEEPWHITESPACE%%>  var t = new Date;

<%%KEEPWHITESPACE%%>  this.timer_ = window.setInterval(function() {
<%%KEEPWHITESPACE%%>    var diff = new Date - t;
<%%KEEPWHITESPACE%%>    if (timeDiv) timeDiv.textContent = (diff / 1000).toFixed(2) + ' seconds';
<%%KEEPWHITESPACE%%>  }, 100);
};

PuzzleDemo.prototype.addRandomCountries_ = function() {
<%%KEEPWHITESPACE%%>  // Shuffle countries
<%%KEEPWHITESPACE%%>  this.countries_.sort(function() {
<%%KEEPWHITESPACE%%>    return Math.round(Math.random()) - 0.5;
<%%KEEPWHITESPACE%%>  });

<%%KEEPWHITESPACE%%>  var countries = this.countries_.slice(0, PuzzleDemo.NUM_PIECES_);
<%%KEEPWHITESPACE%%>  for (var i = 0, country; country = countries[i]; i++) {
<%%KEEPWHITESPACE%%>    this.addCountry_(country);
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.addCountry_ = function(country) {
<%%KEEPWHITESPACE%%>  var options = {
<%%KEEPWHITESPACE%%>    strokeColor: PuzzleDemo.START_COLOR_,
<%%KEEPWHITESPACE%%>    strokeOpacity: 0.8,
<%%KEEPWHITESPACE%%>    strokeWeight: 2,
<%%KEEPWHITESPACE%%>    fillColor: PuzzleDemo.START_COLOR_,
<%%KEEPWHITESPACE%%>    fillOpacity: 0.35,
<%%KEEPWHITESPACE%%>    geodesic: true,
<%%KEEPWHITESPACE%%>    map: this.map_,
<%%KEEPWHITESPACE%%>    draggable: true,
<%%KEEPWHITESPACE%%>    zIndex: 2,
<%%KEEPWHITESPACE%%>    paths: country.start.map(google.maps.geometry.encoding.decodePath),
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  var poly = new google.maps.Polygon(options);
<%%KEEPWHITESPACE%%>  google.maps.event.addListener(poly, 'dragend', function() {
<%%KEEPWHITESPACE%%>    this.checkPosition_(poly, country);
<%%KEEPWHITESPACE%%>  }.bind(this));

<%%KEEPWHITESPACE%%>  this.polys_.push(poly);
};

PuzzleDemo.prototype.boundsContainsPoly_ = function(bounds, poly) {
<%%KEEPWHITESPACE%%>  var b = new google.maps.LatLngBounds(
<%%KEEPWHITESPACE%%>      new google.maps.LatLng(bounds[0][0], bounds[0][1]),
<%%KEEPWHITESPACE%%>      new google.maps.LatLng(bounds[1][0], bounds[1][1]));
<%%KEEPWHITESPACE%%>  var paths = poly.getPaths().getArray();
<%%KEEPWHITESPACE%%>  for (var i = 0; i &lt; paths.length; i++) {
<%%KEEPWHITESPACE%%>    var p = paths[i].getArray();
<%%KEEPWHITESPACE%%>    for (var j = 0; j &lt; p.length; j++) {
<%%KEEPWHITESPACE%%>      if (!b.contains(p[j])) {
<%%KEEPWHITESPACE%%>        return false;
<%%KEEPWHITESPACE%%>      }
<%%KEEPWHITESPACE%%>    }
<%%KEEPWHITESPACE%%>  }
<%%KEEPWHITESPACE%%>  return true;
};

PuzzleDemo.prototype.replacePiece_ = function(poly, country) {
<%%KEEPWHITESPACE%%>  var options = {
<%%KEEPWHITESPACE%%>    strokeColor: PuzzleDemo.END_COLOR_,
<%%KEEPWHITESPACE%%>    fillColor: PuzzleDemo.END_COLOR_,
<%%KEEPWHITESPACE%%>    draggable: false,
<%%KEEPWHITESPACE%%>    zIndex: 1,
<%%KEEPWHITESPACE%%>    paths: country.end.map(google.maps.geometry.encoding.decodePath),
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  poly.setOptions(options);
<%%KEEPWHITESPACE%%>  this.count_++;
<%%KEEPWHITESPACE%%>  this.setCount_();
};

PuzzleDemo.prototype.checkPosition_ = function(poly, country) {
<%%KEEPWHITESPACE%%>  if (this.boundsContainsPoly_(country.bounds, poly)) {
<%%KEEPWHITESPACE%%>    this.replacePiece_(poly, country);
<%%KEEPWHITESPACE%%>  }
};

PuzzleDemo.prototype.start_ = function() {
<%%KEEPWHITESPACE%%>  this.setDifficultyStyle_();
<%%KEEPWHITESPACE%%>  this.resetGame_();
};

PuzzleDemo.prototype.removeCountries_ = function() {
<%%KEEPWHITESPACE%%>  for (var i = 0, poly; poly = this.polys_[i]; i++) {
<%%KEEPWHITESPACE%%>    poly.setMap(null);
<%%KEEPWHITESPACE%%>  };

<%%KEEPWHITESPACE%%>  this.polys_ = [];
};

function initMap() {
<%%KEEPWHITESPACE%%>  var map = new google.maps.Map(document.getElementById('map'), {
<%%KEEPWHITESPACE%%>    disableDefaultUI: true,
<%%KEEPWHITESPACE%%>    center: {lat: 10, lng: 60},
<%%KEEPWHITESPACE%%>    zoom: 2
<%%KEEPWHITESPACE%%>  });

<%%KEEPWHITESPACE%%>  (new PuzzleDemo).init(map);
}
<%%KEEPWHITESPACE%%>    &lt;/script&gt;
<%%KEEPWHITESPACE%%>    &lt;script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyB6O25GLEFd5l6wYeEgmLzMWZS7bs-IyU8&amp;libraries=geometry&amp;callback=initMap"
<%%KEEPWHITESPACE%%>        async defer&gt;&lt;/script&gt;
<%%KEEPWHITESPACE%%>  &lt;/body&gt;
&lt;/html&gt;

Project 8 ideas

Posted on by

Currently I am interested in using Firebase in collaboration with realtime mapping software to create an interactive and collaborative mapping experience.  I would like users to be able to open up a map, click and make pins that could contain data such as state, country, county, latitude, longitude, temperature, and maybe even a picture of the area.  Currently, I have seen examples like this https://developers.google.com/maps/documentation/javascript/firebase that involve creating a collaborative heat map however I want to step it up and have it be so that users can see data on not only their points but various others.  I’d also implement a similar time constraint to the heat map though so that points don’t stay on forever lest over time the map would just be a bunch of points and be too difficult to try to find or click anything.

Project 0 Week 10

Posted on by

Facebook perhaps has one of the worst tagging systems I have ever encountered.  Currently I am still coming up with problems when I try to tag people who I am not friends with.  I want people who are in my pictures to be able to tag themselves.  For some reason permissions for that is not allowed, however not only is it not allowed for other people, I can’t do it either.  How in the world is it that a person can’t edit nor tag their own album?  How do I not have permission to tag my own album?  At first, I was thinking perhaps it has to deal with the permissions of other peoples accounts, however they were able to do it with other photos.  Thus, I checked under account and settings and timeline and tagging where a lot of people are saying to turn off review tags.  Well my review tags has always been turned off though.  This is seriously just so frustrating to me.  Not only do I have issues with this but I had issues earlier with simply uploading the photos as facebook as I was initially trying to upload the album onto the page I was sharing it with but it was only uploading small amounts of the photos in my album, it only worked once I decided to upload it on my own account and share it to the page.  I assume perhaps that’s where the problem lies, but this button stating you don’t have permission to add tags on to your own album should not exist.  If it’s your album and you are logged in to your account you should always have permissions to change it.  Meanwhile, I can upload all of this on flickr in very little time and be able to easily edit in tags and share to other people.

Click Confetti HTML

Posted on by 
 
<!DOCTYPE html>
<head>
  <title>Click Confetti</title>
 
  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }
 
    body {
        font-size:180%;
        font-family:"Open Sans";
    }
 
    .dot {
      position:absolute;
      height:30px;
      width:30px;
      background-color:black;
      border-radius:50%;
      opacity: 0.5;
    }
  </style>
 
  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body>
 
<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();
 
  function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
   

  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyCdUZeJTXzbqEXfVzskUFOoY-Mqh9TnyvU",
    authDomain: "click-function-test.firebaseapp.com",
    databaseURL: "https://click-function-test.firebaseio.com",
    projectId: "click-function-test",
    storageBucket: "click-function-test.appspot.com",
    messagingSenderId: "257165968755"
  };

 
  firebase.initializeApp(config);
 
  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");
 
  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];
 
    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    newDot.css("background-color",getRandomColor);
    j('#container').append(newDot);
  });
 
  erase.on('value',function() {
    j('.dot').remove();
  });
 
 
  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });
 
 
 
    j(document).click(function(e) {
      var position = e.pageX+","+e.pageY;
 
      dot.transaction(function() {
        return position;
      });
 
    });
  });
 
 
</script>
 
  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>
 
</body>
</html>

Observe 8

Posted on by

https://www.youtube.com/watch?v=kxkrdLI6e6M

This week I was inspired by a nerdwriter video on “How Dark Patterns Trick You Online”  In the video he goes over various ways dark patterns on places like buttons encourage users to click on something they may otherwise not have clicked.  The absence of such patterns also discourages users from clicking there (think of a yes/no do you want to continue question where yes has a dark color button and no has none).  He also went over how difficult it is to unsubscribe or delete certain accounts, like Amazon, and how websites place deactiviation in places most users would not expect to look (for example amazon’s is not under “your account”  but rather you have to go to the end of the page and look for help and click numerous other buttons before finally getting to a delete account page).

Ideas for Social Media

Posted on by

Ideas to improve social media w/ Alyssa

Make Facebook have certification for approved accounts so no fakes or duplicates could be made

Get rid of the Connect button for Facebook that is on other sites, such as connecting or logging in on other sites with your facebook, or connecting your facebook contacts with other accounts

Higher crackdown on bots, fake accounts, and accounts that steal information.  There should be report buttons for accounts that users believe are fake so that such accounts can be manually reviewed and taken care of.

Support content creators more, either monetarily or through marketing, content creators are the one’s who get many new people to want to join a platform, if other platforms support their creators better those creators would rather be there then someplace they and their work is ignored or used for the benefit of the company over themselves.  A platform without good content creators will not attract more users.

Separate newsfeeds, have one just for friends, and another for news and other sources you’re interested in.  This way, you can focus more on content you care about, such as what your friends are posting, over what Facebook wants you to care about.

Make deleting accounts easier – Numerous sites, social media or not, make it incredibly difficult to delete the account, have rules like the account will be totally deleted after 30 days of not using as opposed to immediately.  With the 30 day rule it is especially annoying because if you accidently click on a notification, the app button, an email, etc, you could accidently reactivate account and start the deactivation process all over again.

Make it easier to report stolen work – This is more so to help with copyright issues, but there are numerous problems on platforms like Instagram of people stealing artists work and claiming them as their own.  It should be easy to get these deleted, especially if it’s something stolen from Instagram, as all that would be needed is the date posted, though may not always be the case most likely first person to post the artwork is the one who made it.

Be able to organize how you view your newsfeed – give users choice of seeing their feed in chronological order or perhaps most controversial or highest liked/upvoted, this way viewers can see what they want to see first

Observe: Movie Scoring

Posted on by

So for my observe I wanted to look into how movies are scored on the popular site Rotten Tomatoes.  I believe both the tomatometer and the audience score to be somewhat flawed.  For audience score this is mostly due to it being divided up by “liked it” and “didn’t like it” and the fact that due to it being an audience or the public scoring just about anyone can vote in that category whether they had seen the movie or not.  Though, tomatometer also has its flaws as pretty much any journalist can claim to be a critic, however it does help to divide it up by top critics and those who are not.  Another problem with the meter is that it essentially just takes the average of scores to come up with the rating.  This can be flawed as the average can skew due to outliers, so a few people rating a movie a 5/5 though most are lower can skew the rating closer towards a fresh rating.

Project 5: Hide Youtube Thumbnails

Posted on by

My initial idea was to hide certain key words in youtube titles, however I was having difficulty being able to select the titles in youtube so instead I decided to focus on hiding the thumbnails instead.  The only major problem I came across with hiding youtube thumbnails was that it does not hide every thumbnail on the page.  I believe this is because when you scroll down Youtube refreshes to add more videos but so far it is only the first couple lines of videos that are hidden.  These videos are also hidden in a way that if you put your mouse over it you can see what the content actually is.  I thought it was a fun way to sort of experiment with Youtube and make video content based solely off the title instead of the image, while my original idea was the exact opposite of that.  Here is the link to the extension https://chrome.google.com/webstore/detail/hide-youtube-thumbnail/hlfmemncaopfjkenjjkelmimnpemfpck

Replace Idea

Posted on by

So my plan for my script is to add and replace the rating system on MAL to be more similar to IMDb’s when it comes to rating shows.  Personally, I think being able to rate shows both with decimal point and also by each episode is better than being left with only a 10 point scale and having to rate the entire show as a whole.  I think rating by episode gives those interested in looking into the show an idea of the range of enjoyment episode by episode and for those rewatching helps them sparse through the best episodes easily.

Observe week 8

Posted on by

So recently I have gotten into playing Pokemon Showdown with friends online.  What makes this game fun is the ease as to how you can competitively battle, in actual Pokemon games you would have to spend a lot of time catching and training Pokemon, On Showdown it is essentially a database of all the Pokemon available and you are able to make any sort of team you wish to create.  The feature I also enjoy is the random battle as well as that is instant gratification since you don’t even need to spend the time to make a team.  Over time you collect and lose points depending on if you win or lose and since there are numerous players online it is unlikely you’d be stuck in limbo during a battle unless the other player is planning to forfeit.

 

Observe Youtube

Posted on by

 

Possibly one of the most annoying features on Youtube, the autoplay button is something I tend to notice a lot, especially when on other computers.  It’s always automatically on and instead of prioritizing watching videos the first thing I prioritize when getting on to youtube is turning off the autoplay button.  I personally believe it is constantly on to rack up views for videos and get people to watch things they otherwise wouldn’t have.  The only use I can see it for is playlists involving music, otherwise I don’t want to sit through multiple somewhat different videos in a row.  I usually go on to Youtube to watch one thing at a time so this feature is just a nuisance to me.

Project#4 Erase

Posted on by 
// ==UserScript==
// @name         Coinmarkethide
// @namespace    coinmarketcap
// @version      0.1
// @description  Hide coin values
// @author       Connie Sarantos
// @match        https://coinmarketcap.com/currencies/vechain/
// @grant        none
// ==/UserScript==

(function() {

var j;

function main() {

    j = jQuery.noConflict();

    j('span').each(function() { hideElement(this); });

    ready('span', function(e) { hideElement(e); });

    function hideElement(e) { j(e).hide(); }
    j('.container').each(function() { hideElement(this); });
    j('.container').each(function() { hideElement(this); });
ready('li', function(e) { hideElement(e); });
function fadeBackIn() {
j('li').fadeIn(50000);}function fadeOutIn() {
j('li').fadeOut(500000, fadeBackIn); }
j('li').fadeIn(50000);}{
}
main();

})();

So for my ERASE project I decided to go onto coin market cap and erase the numbers attached to coins. I thought this was a fun way to manipulate the market, I think rather than erasing replacing numbers could be a lot of fun too.

Project 4 ERASE ideas

Posted on by

1. Remove pictures from Instagram
2. Erase likes from Facebook
3. Erase subscriber count and like bar from Youtube
4. Erase dollar amount from Steemit
5. Erase prices on coin market cap
6. erase comments on Youtube
7. Delete IMDB rating
8. Get rid of Rotten Tomato meter

Observe #4

Posted on by

So recently I have noticed on Youtube that under certain news organization videos they have added a little disclaimer on the bottom of every one of their videos describing how they are publicly funded or funded by the government.  Each one of these disclaimers contains a link to a wikipedia article on the respective news organizations.  According to Youtube, these disclaimers are only seen by U.S. residents and are to help against the problem of fake news and propaganda in the media and also to give viewers additional information so they know more about their news sources.  Personally, I think this is one of the most absurd ideas ever.  If they wanted to specifically target fake news, they would include a report button on videos for that, and once there are a significant amount of fake news reports add a tag on the video stating it may be fake news.  Currently this disclaimer is attached to every video say the BBC or PBS uploads, regardless of whether the information they post is legitimate or not.  Also, in regards to these disclaimers all they provide is one wikipedia article on the news page, some of which provide more positive information on the organizations than negative.  Lastly, these disclaimers are only being attached to news organizations that are publicly funded or funded by the government.  However, many organizations that have been known to report misinformation in the past have absolutely no disclaimers at all such as Fox News or InfoWars.  These disclaimers just seem very bizarre to me and feel like Youtube is trying to influence their users to watch certain videos over other ones.

Code exercise 2/12

Posted on by 
// ==UserScript==
// @name         Nat geo userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  tweak national geographic
// @author       connie sarantos
// @match        https://www.nationalgeographic.com/
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

(function() {
    'use strict';
var j = jQuery.noConflict();
j('.ng-globalnav').text("PUPPIES");
    j('p').hide();
       function fadeBackIn() {
  j('.mt_div-link').fadeOut();
function fadeInOut() {
    j('p').fadeOut(fadeBackIn);
j('mt_div-link').fadeIn(4545);
     setInterval(fadeInOut, 3000);
        j('#header-ad').hide();
        j('mt_div-link').fadeOut(2000, fadeBackIn);
    j('mt_div-link').fadeInOut(10000);
    j('p').fadeOut(10000);
}
}
})();

Project 0 Observe 3

Posted on by

So recently I have been playing an online game called amq or anime music quiz. Basically, you can play with up to 8 other people and connect your myanimelist account (essentially like an imdb for anime) to the quiz. The quiz will then choose opening, ending, and/or insert songs from shows you and the other players have watched. Based on just the song alone you have to guess what series the song is from. There is a timer countdown that you can control, as well as how many songs per round, difficulty, etc. It’s a lot of fun to play with online friends cause you get to learn about their show preferences and also learn about new shows and some good music. It’s also competitive in that you get points for guessing correctly, though the only thing points get you is the ability to change your character avatar. The only major negative is that it can have some buffering and player issues, where a song will take too long to buffer or will be silent for some players. Or if you’re playing with someone with bad internet connection their game can check out and they’d be forced to leave the game which is what happens a lot below with some of the players from places like Australia.

Project 3:ADD

Posted on by 

j('.currency-name-container').append(' HODL');
j('a:contains("Market")').prepend('Crashing ');

j('h2').prepend('As you should already know ');

j('a').prepend('Literally, ');
j('h2').append(' literally');
j('h3').append(' literally');