anonymous No title
HTML
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>

<body>

  <img id='foo' src='http://placekitten.com/2000/1000' width='500' height='250'>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
  <script src='jquery.wheelzoom.js' type='text/javascript'></script>
  <script>
    ! function($) {
      var transparentPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
      var defaults = {
        zoom: 0.10
      };
      var wheel;

      if (document.onmousewheel !== undefined) { // Webkit/Opera/IE
        wheel = 'onmousewheel';
      } else if (document.onwheel !== undefined) { // FireFox 17+
        wheel = 'onwheel';
      }

      $.fn.wheelzoom = function(options) {
        var settings = $.extend({}, defaults, options);

        if (!this[0] || !wheel || !('backgroundSize' in this[0].style)) { // IE8-
          return this;
        }

        return this.each(function() {
          var img = this;
          var $img = $(img);

          function loaded() {
            var width = $img.width();
            var height = $img.height();
            var bgWidth = width;
            var bgHeight = height;
            var bgPosX = 0;
            var bgPosY = 0;
            var offsetBorderX = parseInt($img.css('border-left-width'), 10);
            var offsetBorderY = parseInt($img.css('border-top-width'), 10);
            var offsetPaddingX = parseInt($img.css('padding-left'), 10);
            var offsetPaddingY = parseInt($img.css('padding-top'), 10);

            $img.css({
              background: "url(" + img.src + ") 0 0 no-repeat",
              backgroundSize: width + 'px ' + height + 'px',
              backgroundPosition: offsetPaddingX + 'px ' + offsetPaddingY + 'px'
            });

            function updateBgStyle() {
              if (bgPosX > 0) {
                bgPosX = 0;
              } else if (bgPosX < width - bgWidth) {
                bgPosX = width - bgWidth;
              }

              if (bgPosY > 0) {
                bgPosY = 0;
              } else if (bgPosY < height - bgHeight) {
                bgPosY = height - bgHeight;
              }

              img.style.backgroundSize = bgWidth + 'px ' + bgHeight + 'px';
              img.style.backgroundPosition = (bgPosX + offsetPaddingX) + 'px ' + (bgPosY + offsetPaddingY) + 'px';
            }

            // Explicitly set the size to the current dimensions,
            // as the src is about to be changed to a 1x1 transparent png.
            img.width = img.width || img.naturalWidth;
            img.height = img.height || img.naturalHeight;
            img.src = transparentPNG;

            img[wheel] = function(e) {
              var deltaY = 0;

              e.preventDefault();

              if (e.deltaY) { // FireFox 17+
                deltaY = e.deltaY;
              } else if (e.wheelDelta) {
                deltaY = -e.wheelDelta;
              }

              // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
              // We have to calculate the target element's position relative to the document, and subtrack that from the
              // cursor's position relative to the document.
              var offsetParent = $img.offset();
              var offsetX = e.pageX - offsetParent.left - offsetBorderX - offsetPaddingX;
              var offsetY = e.pageY - offsetParent.top - offsetBorderY - offsetPaddingY;

              // Record the offset between the bg edge and cursor:
              var bgCursorX = offsetX - bgPosX;
              var bgCursorY = offsetY - bgPosY;

              // Use the previous offset to get the percent offset between the bg edge and cursor:
              var bgRatioX = bgCursorX / bgWidth;
              var bgRatioY = bgCursorY / bgHeight;

              // Update the bg size:
              if (deltaY < 0) {
                bgWidth += bgWidth * settings.zoom;
                bgHeight += bgHeight * settings.zoom;
              } else {
                bgWidth -= bgWidth * settings.zoom;
                bgHeight -= bgHeight * settings.zoom;
              }

              // Take the percent offset and apply it to the new size:
              bgPosX = offsetX - (bgWidth * bgRatioX);
              bgPosY = offsetY - (bgHeight * bgRatioY);

              // Prevent zooming out beyond the starting size
              if (bgWidth <= width || bgHeight <= height) {
                bgWidth = width;
                bgHeight = height;
                bgPosX = bgPosY = 0;
              }

              updateBgStyle();
            };

            // Make the background draggable
            img.onmousedown = function(e) {
              var last = e;

              e.preventDefault();

              function drag(e) {
                e.preventDefault();
                bgPosX += (e.pageX - last.pageX);
                bgPosY += (e.pageY - last.pageY);
                last = e;
                updateBgStyle();
              }

              $(document)
                .on('mousemove', drag)
                .one('mouseup', function() {
                  $(document).unbind('mousemove', drag);
                });
            };
          }

          if (img.complete) {
            loaded();
          } else {
            $img.one('load', loaded);
          }

        });
      };

      $.fn.wheelzoom.defaults = defaults;

    }(window.jQuery);

    $('#foo').wheelzoom();
  </script>
</body>

</html>
anonymous No title
HTML
</2019>
<2020>
  <h1>HELLO 2020!!</h1>
anonymous No title
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <p>アンケート</p>
  <input type="text" class="username">

  <p>Q1</p>
  <p>今の会社に満足してますか?</p>
  <div>
    <form id="Q1">
      <input name="answer1" type="radio" value="yes"> yes
      <input name="answer1" type="radio" value="no"> no
    </form>
  </div>

  <p>Q2</p>
  <p>3年以内に転職したいですか?</p>
  <div>
    <form id="Q2">
      <input name="answer2" type="radio" value="yes"> yes
      <input name="answer2" type="radio" value="no"> no
    </form>
  </div>

  <p>Q3</p>
  <p>将来の夢はありますか?</p>
  <div>
    <form id="Q3">
      <input name="answer3" type="radio" value="yes"> yes
      <input name="answer3" type="radio" value="no"> no
    </form>
  </div>

  <button class="send">回答</button>
  
  <p>回答者名</p>
  <div class="output0"></div>
  <p>Q1 回答</p>
  <div class="output1"></div>
  <p>Q2 回答</p>
  <div class="output2"></div>
  <p>Q3 回答</p>
  <div class="output3"></div>

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!--** 以下Firebase **-->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
   https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyADTgX2GS5AIOfW4xxg6j5WhS1X83KU78U",
    authDomain: "gs-chat-12804.firebaseapp.com",
    databaseURL: "https://gs-chat-12804.firebaseio.com",
    projectId: "gs-chat-12804",
    storageBucket: "gs-chat-12804.appspot.com",
    messagingSenderId: "47926875368",
    appId: "1:47926875368:web:73688bca03c57e5b16e55d",
    measurementId: "G-M90TM0BZT3"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

  //firebaseのデーターベース(保存させる場所)を使いますよ
  const newPostRef = firebase.database().ref();
  // ここから下にjqueryの処理を書いて練習します

  $(".send").on("click",function(){
    newPostRef.push({
    username : $(".username").val(), 
    result1 : $('input[name="answer1"]:checked').val(),
    result2 : $('input[name="answer2"]:checked').val(),
    result3 : $('input[name="answer3"]:checked').val(),
  })});
  
  newPostRef.on("child_added",function(data){
    const v = data.val();
    // const k = data.key();
    const str0 = v.username
    const str1 = v.result1;
    const str2 = v.result2;
    const str3 = v.result3;
    $(".output0").append(str0);
    $(".output1").append(str1);
    $(".output2").append(str2);
    $(".output3").append(str3);
  });

</script>

</body>
</html>
anonymous No title
HTML
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		.hoge {
			font-size: 12px;
			float: left;
		}
		.hage {
			float: left;
		}
		label{
			display:block;
			position:relative;
			padding-left:1em;
		}
		label input{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			margin:auto;
		}
		</style>

		<script type="text/javascript">
		<!--
			const colorEFSF = "rgba( 19, 146, 244,1.0)";
			const colorZION = "rgba(255,  48,   0,1.0)";
			const startX = 75;
			const startY = 75;
			const endX = 75;
			const endY = 75;

			var testColor = "";


			const imageWidth = 540;
			const imageHeight = 358;
			var imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/";

			function chipDraw(canvas) {
				var context = canvas.getContext('2d');

				context.fillStyle = testColor;
				context.strokeStyle = "#000000";
				context.lineWidth = 0.25;

				var radius = 4;
				for ( var i = 0; i < 51; i++ ) {

					var randomX = Math.floor( Math.random() * (canvas.width  -  startX - endX ) );
					var randomY = Math.floor( Math.random() * (canvas.height -  startY - endY ) );
					context.beginPath();
					context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
					context.fill();
					context.stroke();

				}

				context.translate(150, 95 );

				context.scale(0.345,0.275);
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo( 10,  0);
				context.lineTo( 53,  0);
				context.lineTo( 57, 32);
				context.lineTo( 63, 32);
				context.lineTo( 63, 63);
				context.lineTo(  0, 63);
				context.lineTo(  0, 32);
				context.lineTo(  6, 32);
				context.closePath();
				context.fill();
				context.stroke();

				context.fillStyle = "#000000";
				context.font = "70px arial bold";
				context.fillText("A", -3, 57);
				context.fillText("A", -4, 53);
				context.fillText("A", -2, 53);
				context.fillText("A", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("A", 0, 55);

			}
			function draw(canvas,imagePath){
				console.log("draw");
				const image = new Image();
				image.addEventListener("load",function (){
					//canvas.width = image.naturalWidth;
					//canvas.height = image.naturalHeight;
					canvas.width = imageWidth;
					canvas.height = imageHeight;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0 , 0 ,imageWidth, imageHeight);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function mainDraw() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
					console.log("color");
					const colors = document.getElementsByName("color");
					for (let i = 0; i < colors.length; i++){
						if(colors[i].checked){
							if( i == 0 ) {
								//console.log("colorEFSF");
								testColor = colorEFSF;
							}
							if( i == 1 ) {
								//console.log("colorZION");
								testColor = colorZION;
							}
							if( i == 2 ) {
								//console.log("user1");
								testColor = document.form1.user1.value;
							}
							if( i == 3 ) {
								//console.log("user1");
								testColor = document.form1.user2.value;
							}
							break;
						}
					}
					var str ="";
					const map = document.getElementsByName("map");
					for (let i = 0; i < map.length; i++){
						if(map[i].checked){
							str = map[i].value;
							break;
						}
					}
					draw(canvas,imagePath + str );
				}
			}
			function pre() {
				var colors = document.getElementsByName("color");
				for ( var i = 0; i < colors.length; i++ ) {
					console.log(colors[i].name);
					colors[i].addEventListener("click", mainDraw );
				}
				colors[0].checked = true;
				var maps = document.getElementsByName("map");
				for ( var i = 0; i < maps.length; i++ ) {
					console.log(maps[i].name);
					maps[i].addEventListener("click", mainDraw );
				}
				maps[0].checked = true;
				mainDraw();
			}
		//-->
		</script>
	</head>
	<body onLoad="pre()">
		<div class="hage" >
			<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
		</div>
		<div class="hoge" >
			<form name="form1">
				<label><input type="radio" name="color">EFSF</label>
				<label><input type="radio" name="color">ZION</label>
				<label><input type="radio" name="color">USER1</label>
				<label><input type="radio" name="color">USER2</label>
				<p>USER1<input type="text" name="user1" value="#FFFFFF" ></p>
				<p>USER2<input type="text" name="user2" value="#FFFF00" ></p>
				<br>
			</form>
			<form name="form2">
				<label><input type="radio" name="map" value="001/sentence1_image2.jpg" >オデッサ鉱山基地 懸崖撒手</label>
				<label><input type="radio" name="map" value="001/sentence2_image2.jpg" >オデッサ鉱山基地 虎穴虎子</label>
				<label><input type="radio" name="map" value="001/sentence3_image2.jpg" >オデッサ鉱山基地 雲外蒼天</label>

				<label><input type="radio" name="map" value="008/sentence1_image2.jpg" >北極基地 ブリザード作戦</label>
				<label><input type="radio" name="map" value="008/sentence2_image2.jpg" >北極基地 暗中飛躍</label>
				<label><input type="radio" name="map" value="008/sentence3_image2.jpg" >北極基地 雲竜風虎</label>
			</form>
		</div>
	</body>
</html>
anonymous No title
HTML
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		</style>

		<script type="text/javascript">
		<!--
			const colorEFSF = "rgba( 19, 146, 244,1.0)";
			const colorZION = "rgba(255,  48,   0,1.0)";
			const startX = 75;
			const startY = 75;
			const endX = 75;
			const endY = 75;

			var testColor = colorEFSF;

			function chipDraw(canvas) {
				var context = canvas.getContext('2d');

				context.fillStyle = testColor;
				context.strokeStyle = "#000000";
				context.lineWidth = 0.25;

				var radius = 4;
				for ( var i = 0; i < 51; i++ ) {

					var randomX = Math.floor( Math.random() * (canvas.width  -  startX - endX ) );
					var randomY = Math.floor( Math.random() * (canvas.height -  startY - endY ) );
					context.beginPath();
					context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
					context.fill();
					context.stroke();

				}

				context.translate(150, 95 );

				context.scale(0.345,0.275);
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo( 10,  0);
				context.lineTo( 53,  0);
				context.lineTo( 57, 32);
				context.lineTo( 63, 32);
				context.lineTo( 63, 63);
				context.lineTo(  0, 63);
				context.lineTo(  0, 32);
				context.lineTo(  6, 32);
				context.closePath();
				context.fill();
				context.stroke();

				context.fillStyle = "#000000";
				context.font = "70px arial bold";
				context.fillText("A", -3, 57);
				context.fillText("A", -4, 53);
				context.fillText("A", -2, 53);
				context.fillText("A", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("A", 0, 55);

			}
			function draw(canvas,imagePath){
				console.log("draw");
				const image = new Image();
				image.addEventListener("load",function (){
					canvas.width = image.naturalWidth;
					canvas.height = image.naturalHeight;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0, 0);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function sample() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
				let imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/001/sentence1_image2.jpg";
				//let imagePath = "http://mmoloda-msgo.x0.com/image/71830.png";
				draw(canvas,imagePath);
				}
			}
		//-->
		</script>
	</head>
	<body onLoad="sample()">
		<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
	</body>
</html>
anonymous No title
HTML
<!DOCTYPE html>
<html style="width:1024px; margin:0px;">
	<head>
		<meta charset="UTF-8">

		<style type="text/css">
		</style>

		<script type="text/javascript">
		<!--
			const colorEFSF = "rgba( 19, 146, 244,1.0)";
			const colorZION = "rgba(255,  48,   0,1.0)";
			const startX = 75;
			const startY = 75;
			const endX = 75;
			const endY = 75;
			function chipDraw(canvas) {
				var context = canvas.getContext('2d');

				context.fillStyle = colorEFSF;
				context.strokeStyle = "#000000";
				context.lineWidth = 0.25;

				var radius = 4;
				for ( var i = 0; i < 51; i++ ) {

					var randomX = Math.floor( Math.random() * (canvas.width  -  startX - endX ) );
					var randomY = Math.floor( Math.random() * (canvas.height -  startY - endY ) );
					context.beginPath();
					context.arc(randomX + startX , randomY + startY , radius, 0, 2 * Math.PI, false);
					context.fill();
					context.stroke();

				}

				context.translate(150, 95 );

				context.scale(0.345,0.275);
				context.lineWidth = 2;
				context.beginPath();
				context.moveTo( 10,  0);
				context.lineTo( 53,  0);
				context.lineTo( 57, 32);
				context.lineTo( 63, 32);
				context.lineTo( 63, 63);
				context.lineTo(  0, 63);
				context.lineTo(  0, 32);
				context.lineTo(  6, 32);
				context.closePath();
				context.fill();
				context.stroke();

				context.fillStyle = "#000000";
				context.font = "70px arial bold";
				context.fillText("A", -3, 57);
				context.fillText("A", -4, 53);
				context.fillText("A", -2, 53);
				context.fillText("A", -1, 53);
				context.fillStyle = "#FFFFFF";
				context.font = "64px arial";
				context.fillText("A", 0, 55);
				//context.strokeText("A", 10, 55);

				//context.scale(1,1);

			}
			function draw(canvas,imagePath){
				console.log("draw");
				const image = new Image();
				image.addEventListener("load",function (){
					canvas.width = image.naturalWidth;
					canvas.height = image.naturalHeight;
					const ctx = canvas.getContext("2d");
					ctx.drawImage(image, 0, 0);
					console.log("load!");
					chipDraw(canvas);
				});
				image.src = imagePath;
			}
			function sample() {
				//描画コンテキストの取得
				var canvas = document.getElementById('colortest');
				if (canvas.getContext) {
				let imagePath = "http://msgo.bandainamco-ol.jp/member/concept/map/images/001/sentence1_image2.jpg";
				//let imagePath = "http://mmoloda-msgo.x0.com/image/71830.png";
				draw(canvas,imagePath);
				}
			}
		//-->
		</script>
	</head>
	<body onLoad="sample()">
		<canvas id="colortest">図形を表示するには、canvasタグをサポートしたブラウザが必要です。</canvas>
	</body>
</html>
anonymous No title
HTML
<!-- SAMPLE 01 -->
<div class="p-dropdown">
  <button class="p-dropdown__button js-dropdown-button" type="button" aria-controls="drop_contents_01" aria-expanded="false">〇〇のコンテンツについて見る</button>
  <div id="drop_contents_01" class="p-dropdown__contents js-dropdown-content" aria-hidden="true">
    〇〇のコンテンツ
  </div>
</div>

<!-- SAMPLE 02 -->
<div class="p-dropdown" aria-expanded="false">
  <button class="p-dropdown__button js-dropdown-button" type="button">△△のコンテンツについて見る</button>
  <div id="drop_contents_02" class="p-dropdown__contents js-dropdown-content" aria-hidden="true">
    △△のコンテンツ
  </div>
</div>
anonymous No title
HTML
<div class="p-dropdown">
  <button class="p-dropdown__button" type="button" aria-controls="drop_contents" aria-expanded="false">タブ</button>
  <div id="drop_contents" class="p-dropdown__contents" aria-hidden="true">
    コンテンツ内容
  </div>
</div>
anonymous No title
HTML
<div class="p-dropdown">
  <button class="p-dropdown__button" type="button" aria-controls="drop_contents" aria-expanded="false">タブ</button>
  <div id="drop_contents" class="p-dropdown__contents" aria-hidden="true">
    コンテンツ内容
  </div>
</div>
anonymous No title
HTML
class CommentsController < ApplicationController
	def create
		@comment = Comment.new(comment_params)
		@comment.user_id = current_user.id
		if @comment.save!
			redirect_back(fallback_location: root_path)
		else
			redirect_back(fallback_location: root_path)

		end
	end

	private
	def comment_params
		params.require(:comment).permit(:content)
	end
end
Don't you submit code?
Submit